开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情
前言
分页在展示数据列表的场景肯定是非常多的。
一般的项目开发中，数据量特别大，一般都是后端接口直接处理分页返回，前端直接调用即可。
但是前端也是可以不需要借助后端，自己也是可以处理分页的。今天我这个后端开发就站在前端的角度上，处理列表分页。
友情提示：
数据量大的情况下一定要后端处理分页，前端虽然可以实现，但是仅限数据量不是特别大的情况下！
先给大家看下我的列表，一个特别单纯的列表，只是返回一个用户列表，并且根据id倒叙排序。
给大家调用看下吧，一个很简单的结构：
技术选项:Pagination
这里我选择使用的是element-ui的分页：Pagination
它是ElementUI下的一个组件：
它的参数特别重要，我们就是借助这些参数实现的分页
以下案例我只是挑选个别参数，更多参数使用说明相间文档
大家根据自己的需求挑选一款即可，挑选不出来心仪可以参考我这一套，我也是精心挑选并且测试了很多参数。
增加分页代码
把这一块加到页面上，就有一个视觉上的分页效果了。
相关代码：
<!-- 分页 -->
<!--
@size-change // pageSize 改变时会触发 每页条数
@current-change // currentPage 改变时会触发 当前页
:current-page // 默认false
background// 是否为分页按钮添加背景色
:page-sizes // 每页显示个数选择器的选项设置 这是下拉框可以选择的，每选择一行，要展示多少内容 类似：[10, 20, 30, 40, 50, 100]
page-sizes=显示当前行的条数
layout // 组件布局，子组件名用逗号分隔
:total // 总条目数,一般从展示列表的总数获取
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
background
:page-sizes="[1,3,5,10,20]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="userTableData.length">
</el-pagination>
注意代码位置，我是把分页放在table下面了：
初始化数据
紧接着还要定义默认页和默认每页条数，以及数据列表
userTableData我是用过接口返回值赋值的。
data() {
return {
userTableData: [], // 用户列表
currentPage:1, // 初始页
pagesize:10, // 初始每页的数据
};
},
回调函数
然后就是对分页改变做出的回调函数
逻辑写死即可，函数名需要和上面保持一致，通常直接复制即可。
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
console.log(this.currentPage) //点击第几页
},
到了这里你就可以看到列表分页了，但是会发现实际展示的数据和分页展示的不一致，不要着急，就差最后一步了 ！
指定table分页
出现上面这种情况，是因为列表的data没有适配分页属性:
你现在的代码肯定是这样的：
最后一步，给要展示的table指定分页以及条件。
:data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
:data="userTableData.slice((currentPage-1)pagesize,currentPagepagesize)"
查看效果
这样就一个由前端代码实现的分页就完成了。我们检测下吧
初始化页面
因为我默认展示的就是第一页，并且每页展示10条嘛，所以就是这样的：
