page-size:每页的条数
current-page:当前的页数
page-sizes:每页显示个数选择器的选项设置
@size-change:每页条数 pageSize发生改变时触发
@current-change:当前页
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[20, 40, 60, 80]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageTotal"
></el-pagination>
在data里面声明一下pageNum,pageSize,pageTotal
pageNum: 1,
pageSize: 20 //初始每页条数为20条
pageTotal:100 //总页数
方法
//每页条数
handleSizeChange(val) {
let self = this;
self.pageNum = 1;
self.pageSize = val;
self.getList();
},
//当前页
handleCurrentChange(val) {
let self = this;
self.pageNum = val;
self.pageSize = 20;
self.getList();
}