vue-element如何做前端分页

3,036 阅读1分钟

大多数情况下都是后端做分页的,前端只需要传递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
}