最近在使用Element-UI这套框架配合Vue来写前端页面。在用Element-UI来制作表格的时候，遇到了一些小问题，记录方便学习。

其中两个事件是关于切换当前页和切换显示的列表条数的。另外的属性也可以知道它的意思。它们都是动态绑定的。其中几个属性的值被存到了data中，

两个事件的处理简单的进行赋值。

这个时候我觉得好像就可以了。点击下一页和切换显示的列表条数。..怎么感觉表格就像大山一样坚定！纹丝不动。于是我直接在页面中想要显示一下当我切换的时候表格的数据

其中tableData是我mock的假数据，存在data中。测试结果发现当我切换的时候表格绑定的这个tableData根本就没有改变。所以理所当然的呈现在表格当中。

那么，意思就是说切换和表格数据这两者根本就没有联动起来！找到问题之后就开始去思考如何解决问题。这两者是存在一定的计算关系的。因为表格的数据的长度(条数)

就是根据我切换的数值相应的变化，那么就应该有这么一个计算式：tableData=（(当前页的页数*页的大小)-（当前页的页数-1）*页的大小）

对应到程序中来就是：tableData=tableData.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize);

这个值可以放到计算属性computed当中,当然也可以直接赋值给表格数据，即: <el-table :data="tableData.slice(...)"></el-table>

vue Element-UI 分页使用(1)的更多相关文章

  1. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  2. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  3. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  4. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  5. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  6. vue + element ui 表格自定义表头，提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  7. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  8. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  9. vue+element ui 的tab 动态增减，切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  10. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

随机推荐

  1. iOS--各种bug详解

    1.为什么传的参数都对,但是就是请求不下来数据. 答:检查下传的字符串中,是不是有多的空格. 例如: 错误:{"startIndex":"1","en ...

  2. Linux安装codis

    codis用go语言开发的,安装前记得先安装go开发环境,Linux安装go语言开发包 前提条件:记得安装git,否则无法下载go语言开发包 1.建立一个go语言的工作目录创建目录:sudo mkdi ...

  3. logstash-1-安装配置

    centos logstash logstash logstash是什么呢, 他是一个数据管道, JRuby编写的运行在java虚拟机的具有收集, 分析和转发数据流功能的工具 特性: 安装 1), w ...

  4. CentOS 7下搭配简单的C语言开发环境

    在CentOS 7下安装gcc,gcc是编译和运行C语言的工具, 安装命令: yum install gcc 中途如果有询问则输入y 安装成功后,通过以下命令 gcc --version 来查看安装的 ...

  5. DataSet 多表关系

    protected void Page_Load(object sender, EventArgs e) { string connectionString = @"Data Source= ...

  6. Redis Cluster高可用集群在线迁移操作记录

    之前介绍了redis cluster的结构及高可用集群部署过程,今天这里简单说下redis集群的迁移.由于之前的redis cluster集群环境部署的服务器性能有限,需要迁移到高配置的服务器上.考虑 ...

  7. JavaScript的3种继承方式

    JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...

  8. 并发编程 —— ScheduledThreadPoolExecutor

    1. 前言 在前面的文章中,我们介绍了定时任务类 Timer ,他是 JDK 1.3 中出现的,位于 java.util 包下.而今天说的 ScheduledThreadPoolExecutor的是在 ...

  9. Visual Studio 监视与快速监视即时窗口没有智能提示

    工具->选项->文本编辑器->C# 将 自动列出成员 参数信息 都勾选上

  10. SQL server Profiler 监视数据库活动

    做网站后台开始时需要考虑后台对数据库的一些操作,比如尽量减少查询次数,尽快释放连接,只选取必须的字段等等.如果是用三层开发,复杂的项目中直接拼装SQL语句多一点,拼装的SQL语句可以直接在SQL se ...