主要在于两个方法的应用:handleSizeChange和handleCurrentChange
handleSizeChange:改变每页的展示数量
handleCurrentChange:改变当前页
示例代码:
html: <el-pagination
style="margin-left:62vw"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[10, 20, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="this.totalNum"
>
</el-pagination>
data: pageNum: 1,
pageSize: 10,
totalNum: 0,
method:
handleSizeChange(val) {
this.pageSize = val; //每页的条
this.pageNum=1 //改变每页显示的条数信息后,返回到第一页
console.log(`每页 ${val} 条`);
this.getList(); //重新调用分页的方法
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val; //当前页数
this.getList();
}