Most of the time, it’s the backend that does the paging. The front end just needs to pass currentPage/Pagesize as the start and limit of the backend pager. Front-end paging only request data once, do front-end data Filter

Variable configuration

count: 0,    
pageSize: 10,     
currentPage: 1,
FilterTableData:[]
Copy the code

The table is bound to a variable on which to do data processing

 :data="FilterTableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
Copy the code

Click on pager configuration

<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>
Copy the code

Page function operation

HandleSizeChange (val) {console.log(' ${val} bars per page '); this.pageSize = val; }, handleCurrentChange(val) { this.currentPage = val; },Copy the code

Data acquisition and data format adaptation

 // TODO        
if (resp.data.code === 200) {          
this.openloading = false;          
this.PolicyTableData = resp.data.results;          
this.FilterTableData = resp.data.results;          
this.count = this.FilterTableData.length
}
Copy the code