vue页面实现分页功能

分页功能分为前端分页和后端分页，前端分页就是用请求从后台把所有的数据拿下来，然后进行分页，如果当数据足够大时，网页就会加载的很慢，唯一的好处就是只需要向后台请求一次就可以了

后端分页就是数据在后台已经分好页了，前端只需要用请求去获取数据即可，后端分页的好处是只会把当前页的数据给拿下来，网页加载的速度会很快，但是不足就是每跳转一次，前端都要向后台发送一次请求

本例子中演示的就是后端分页功能，因为在后台写了pagesize的值为10，也就是一页中显示的记录数为10，因此此例子中我们只传递页数即可，不传pagesize，以密码本平台为例子，如下：

1、首先定义分页模块，如图：

<div class="block" width="50%">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</div>

• :current-page 表示当前是第几页
• :page-sizes 表示可以选择一页多少条数据，为一个数组
• :page-size 表示当前一页显示几条数据
• layout 表示分页需要显示的内容, total表示总数,prev表示上一页,next表示下一页
• total 表示总共多少条数据(从数据库中获取)
• @size-change表示页大小更改的时候触发的事件
• @current-change表示当前页更改的时候触发的事件

2、在script标签中的data()中为currentPage,pageSize和total赋初始值，如图：

3、在methods中添加事件方法，如图：

• handleSizeChange：更改页大小时候触发事件
• handleCurrentChange：更改当前页时候触发事件,this.getList表示在选择页数后，将当前页传递给函数，this.currentPage为点击后设置当前页

4、设置钩子函数，在登录页面后执行此钩子函数，获取第一页数据，如图：

注：此钩子函数独立于methods之外，单独定义即可，不属于任何标签或者函数内

5、定义获取数据的函数，如图：

• PageNum：表示调用getList的时候传递过来的第几页
• this.tableData：获取后台返回来的数据
• this.currentPage：当前页
• this.pageSize：每页显示的记录数，从后台获取的
• this.total：总的记录数，也是从后台获取

6、后台接口配置GET请求参数，参数名为PageNum(后台定义的)，值为前台传递过去的PageNum，如图：

后台根据进行分页查询，比如查询第二页，查看接口返回值，如图：

结果如图所示：