分页思路
前端实现自己的分页
这种思路一般就是后台返回的数据没有做分页处理
前端对返回的数据进行简单的分页
eleui提供了分页的插件,直接使用就可以了
实现思路:
对后端返回的数据js计算出它的length,length就是
分页参数中的总数,
<el-table
@row-click="handle"
:row-class-name="tableRowClassName"
:data="typeList.slice((this.query.pageNum - 1) * this.query.pageSize, this.query.pageNum * this.query.pageSize)">
分页标签:
<el-pagination background :current-page.sync="query.pageNum" :page-size="query.pageSize"
layout="total,prev, pager, next,sizes" :total="typeList.length" @current-change="handleCurrentChange"
@size-change="changeSizeHandler" size="small"></el-pagination>
//分页参数
query: {
pageNum: 1,
pageSize: 10
},
修改每页显示数量和改变页数方法:
changeSizeHandler(size) {
this.query.pageSize = size
},
handleCurrentChange(currentPage) {
this.query.pageNum = currentPage
},
后端实现的分页并返回分页参数给前端
后端已经分了页,将分页参数返回给前端
前端的处理:
分页标签
<el-pagination
background
:current-page="page.currPage"
:page-size="10"
layout="total,prev, pager, next"
:total="page.totalCount"
@current-change="handleCurrentChange"
size="small">
</el-pagination>
//分页参数
page:{
currPage: 1, // 当前页
pageSize: 10, // 每页显示条目个数
totalCount: 1 // 总条目数
},
改变页数方法
handleCurrentChange(val) {
this.page.currPage = val;
this.getList();
},
前端将当前的点击页数作为参数传递给后台,后台返回指定页的所有数据
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。