前端实现分页功能
前端解决分页问题
·
前端实现分页功能,话不多说直接操作
这个是分页的element ui(pagesize是一页有多少条数据,currentPage是当前在第几页)
<div class="tablepage">
<!-- -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
这个是数据(这里用的假数据)
total: '', // 总数据条数
currentPage: 1, // 当前页码
pageSize: 10, //每页个数
tableData: [], // 列表数据
table : [{ vouchernum: 0 },{ vouchernum: 1 }, { vouchernum: 2 }, { vouchernum: 3 },
{ vouchernum: 4 }, { vouchernum: 5 }, { vouchernum: 6 },
{ vouchernum: 7 }, { vouchernum: 8 }, { vouchernum: 9 },
{ vouchernum: 10 }, { vouchernum: 11 }, { vouchernum: 12 },
{ vouchernum: 13 }, { vouchernum: 14 }, { vouchernum: 15 },
{ vouchernum: 16 }, { vouchernum: 17 }, { vouchernum: 18 },
{ vouchernum: 19 }, { vouchernum: 20 }, { vouchernum: 21 }];
第一步:先把数据分页,这里table就是上面的数据源,tableData就是处理后每一页的数据。slice方法就是截取数组中的数据(可以去查一下很简单,这里不多讲)。pageSize就是每页有多少条数据,currentPage就是当前在第几页。a,b这两个式子就是规律总结出来的公式可以直接用(也可以自己写几个数,很简单就可以看出来)。最后别忘了total这个是总数据的条数
getmaterial() {
let a = (this.pageSize * (this.currentPage - 1))
let b = (this.pageSize * this.currentPage)
this.tableData = table.slice(a, b)
this.total = table.length
}
写到这里,你会发现点击第二页或者更后面的页数据没有跳转,接下来实现数据跳转
handleCurrentChange(val) {
this.currentPage = val;
this.getmaterial()
console.log("当前页", val)
}
这样最简单的分页就实现了,具体情况结合具体数据,欢迎大家评论区留言更好的方法,让我也学习学习。
更多推荐
已为社区贡献1条内容
所有评论(0)