vue+element-ui实现前端分页
按照他的文档来写分页
最主要的是 el-table里面展示的数据怎么处理
<el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
(上面这句代码才是重点,下面的都是看他的文档写的,
AllCommodityList 是我后台取出来的数据,
currentPage 当前页初始值设置为0
pagesize 是当前页要展示多少条数据,默认10
)
补充:slice() 方法可从已有的数组中返回选定的元素。
<!--分页--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total=parseInt(total)> </el-pagination> handleSizeChange(val) { this.pagesize = val; // console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { this.currentPage = val; },