两分钟搞定,快来试试吧,很简单
data
// 后端必填参数 这个根据文档的参数去填,不能乱填否则可能会参数错误
obj: {
// 当前页
pagenum: 1,
// 页容量
pagesize: 10,
},
html
<!-- 分页 -->
<div class="block">
<el-pagination
:page-sizes="[3, 5, 10]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
js
methods: {
//这个是请求后端数据,我是经过封装构api的,使用的时候可以直接用axios去请求数据,
list() {
getUserList(this.obj).then((res) => {
console.log(res);
// 将请求的数据赋值给变量
this.tableData = res.users;
// 总条数
this.total = res.total;
});
},
// 当前页事件, 有默认参数val, 赋值给默认定义的数据(当前页),这样点击分页,页数就会跟着变
handleCurrentChange(val) {
// console.log(val);
// 将val赋值当前页,页数改变重新请求
this.obj.pagenum = val;
this.list();
},
// 页数改变,将val 赋值 给 pagesize
handleSizeChange(val) {
// console.log(val);
this.obj.pagesize = val;
this.list();
},
},
完!