elementui分页插件使用总结

elementui分页插件使用总结

这边记录的分页指的是在后端数据不进行分页时，前端分页的办法：
1.第一种情况：需要分页的数据是表格时，使用elementui的分页组件，并对table绑定的 :data进行计算
具体代码如下所示：
分页插件的使用：

<el-pagination background layout="prev, pager, next" :current-page="page.pageNum" :page-size="page.pageSize"
	 :total="page.totalSize" @current-change="handleCurrentChange"></el-pagination>

在表格中处理数据：

<el-table :data="tableData.slice((page.pageNum-1)*page.pageSize,page.pageNum*page.pageSize)"></el-table>

handleCurrentChange方法的实现，此方法用于点击切换页面内容的

handleCurrentChange(val) {
  this.page.pageNum = val;
}

2.第二种情况：分页的数据不是表格时，使用的方法：
分页插件和绑定的方法不变。
在表格中的处理方法，要改变，在页面中直接循环这个数组totaldata就可以了。

computed:{
			totaldata: function() {
				return this.totalList.slice((this.pageRequest.pageNum - 1) * this.pageRequest.pageSize, this.pageRequest.pageNum * this.pageRequest.pageSize);
			}
		}

<div v-for="(item,index) in totaldata" :key="index">
</div>