大多数情况下都是后端做分页的,前端只需要传递currentpage/pagesize即可,作为后端分页器的start和limit,当然也可能遇到后端处理完的数据确实不太规则不方便做分页,前端怎么做呢?前端分页的话只请求一次数据,做前端数据Filter
变量配置
count: 0,
pageSize: 10,
currentPage: 1,
FilterTableData:[]
表格绑定一个变量,在变量上做数据处理
:data="FilterTableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
点击分页器配置
<div class="Pagination">
<el-pagination
align="center"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[10, 50, 100, 200]"
layout="sizes,total, prev, pager, next, jumper"
:total="count"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
分页函数操作
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val; },
handleCurrentChange(val) {
this.currentPage = val; },
数据获取及数据格式适配处理
// TODO
if (resp.data.code === 200) {
this.openloading = false;
this.PolicyTableData = resp.data.results;
this.FilterTableData = resp.data.results;
this.count = this.FilterTableData.length
}