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>