按照他的文档来写分页,最主要的是el-table里面展示的数据怎么处理
<el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style=" 100%">
最主要就是上面标红这一块的处理:
AllCommodityList是后台取得数据,currentPage是当前页,初始值0,pagesize当前需要展示的数据,初始值10
slice()方法从已有数组中返回选定的数据
//1、分页组件
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total=parseInt(total)>
</el-pagination>
//2、控制方法
handleSizeChange(val) {
this.pagesize = val;
},
handleCurrentChange(val) {
this.currentPage = val;
},