08-内容管理-分页功能
渲染分页组件
- 获取总条数 data.total_count
// 总条数
total: 0
筛选头部结果:
<div slot="header">根据筛选条件共查询到 {{total}} 条结果:</div>
动态绑定分页的各个属性值:
<!-- 分页 -->
<el-pagination
class="pager"
background
layout="prev, pager, next, total"
:current-page="reqParams.page"
:page-size="reqParams.per_page"
:total="total"
></el-pagination>
- total 总条数
- page-size 每一页显示条数
- current-page 当前选中第几页
实现分页切换
- 绑定 current-change 事件
- 触发事件的时候获取当前页码
- 发请求即可
<el-pagination
class="pager"
background
layout="prev, pager, next, total"
:current-page="reqParams.page"
:page-size="reqParams.per_page"
:total="total"
+ @current-change="changePager"
></el-pagination>
methods中的方法:
// 切换分页
changePager (newPage) {
// 把提交后台的参数改成新的页码
this.reqParams.page = newPage
this.getArticles()
},