vue Element-UI 分页使用(1)

  最近在使用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>