若非不得已,不建议前端做假分页,下面开始代码吧
<el-table :data='TectableData.slice((currentPageG-1)*pagesizeG,currentPageG*pagesizeG)'>
</el-table>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPageG"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesizeG"
layout="total, sizes, prev, pager, next, jumper"
:total="TectableData.length">
<-- TectableData.length表格数据的总条数 -->
</el-pagination>
data() {
return {
currentPageG: 1, //初始页
pagesizeG: 4, // 每页的数据
TectableData:[],//表格数据
}
}
// 切换每页条数时
handleSizeChange: function(size) {
this.pagesizeG = size;
},
// 切换当前页码时
handleCurrentChange: function(currentPage) {
this.currentPageG = currentPage;
},
代码其实到这里就可以结束了,对,正常的就没问题了。
但是!当我做完了这个分页之后,问题就出现了,由于表格最后一行有一个统计行,且是从后端获取的数据,所以这时候页面显示就会有bug了,于是对表格的:data数据做了处理。这里我们通过监听数据的变化来赋值,将每页所需的数据和每页的统计行数据做合并处理,接下来看代码
<el-table :data='dataGap' >
</el-table>
computed:{
dataGap(){
return Array.from(new Set([...this.TectableData.slice((this.currentPageG-1)*this.pagesizeG,this.currentPageG*this.pagesizeG),...this.newArrG]))
}
},
data() {
return {
newArrG:[],//统计行
}
}
到这,结束