前端实现分页(vue+ElementUI)

前言

大部分时候分页功能是跟后端配合一起完成的。

前端每次发送当前页码 pageNumber 和 每页展示条数 pageSize 给后端，来得到不同的数据。

但有的时候后端人员会一次性把数据全返回回来，然后前端人员手动处理这些数据。这么做的原因无非就是两种：

1. 后端人员懒得处理或者技术不达标

2. 如描述所说，页面检索的数据量过于庞大，每次发送请求都需要很长时间，那么如果继续沿用传统方法，使用体验就会大打折扣。

希望所有人这么做都是因为第二种吧（手动狗头）。这里只说思路，很简单，做过这个功能的人很容易理解，所以暂时不贴代码了。

正文

变量名	含义
allData	所有数据
tableData	页面每次展示的数据
pageNumber	当前页码(默认1)
pageSize	每页展示条数(默认10)

每次点击搜索按钮向后端一次性请求所有的数据回来，保存在变量allData中

截取allData下标为[0,10]的数据，赋值给tableData默认展示第一页数据

this.tableData = this.allData.slice(0, 10)

点击翻页时，在处理事件中我们会得到默认参数 pageNumber 和 pageSize ，比方点击第2页的时候，需要allData[10,20]的数据，点击第三页需要allData[20,30]的数据，那么我们可以写代码了

onChange(pageNumber,pageSize){

      this.tableData = this.allData.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)

}

大功告成~

这只是思路，还有一些小细节根据自己的需求处理吧。