表格需要绑定的属性
<el-table :data="data.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
分页器样式
<el-pagination
:total="data.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[3, 5]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
js代码执行
需要定义数据的部分
data() {
return {
data: [],//渲染数据的数组信息
pageSize: 5,//每页的信息条数
currentPage: 1,//当前页面
};
},
函数执行部分
handleSizeChange: function (pageSize) {
this.pageSize = pageSize;
// console.log(this.pagesize); // 每页下拉显示数据
this.fn();
},
// 换页:更新列表数据
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
// console.log(this.currentPage); //点击第几页
this.fn();
},