今天用了这个element的分页功能,有坑,所以记录一下。官方给的用法是针对表格的,对表格之外的分页并不友好,先说表格的,主要点就在于数据绑定,得在el-table标签里加上
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
今天主要来说说不是表格形式的分页。
1.直接复制官方给的标签
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNo"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="number.length"
></el-pagination>
2.在data了加上 标签里绑定的数据
pageNo: 1, //当前页
pageSize: 15 //每页显示条目数
3.写上标签里绑定的两个change的方法
//分页大小改变
handleSizeChange(val) {
this.pageSize = val;
this.getlist();
},
//当前页数改变
handleCurrentChange(val) {
this.pageNo = val;
this.getlist();
}
4.最重要的一步,也是和表格分页的区别,这里直接用computed来监控数据。然后在标签的v-for直接循环userdata就可以了。
computed: {
userdata() {
let start = (this.pageNo - 1) * this.pageSize;
let end = this.pageNo * this.pageSize;
return this.number.slice(start, end);
}