当我们在使用分页时,虽然有源代码,但是使用的时候还是出错,所以简单总结一下怎么使用
我们直接拿最全的功能来写代码
我们先看各个变量的解释
page-size | 每页显示条目个数,支持 .sync 修饰符 |
total | 总条目数 | number |
current-page | 当前页数,支持 .sync 修饰符 |
简单了解这三个已经足够了
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.page"
:page-size="queryInfo.pagesize"
:page-sizes="[1, 2, 5, 10]"
layout="total, sizes, prev, pager, next ,jumper"
:total="total"
>
</el-pagination>
data() {
return {
lst: [],
total: 0,
//参数
queryInfo: {
query: "",
// 当前页数
page: 1,
// 显示一页多少条数据
pagesize: 2,
},
};
},
fnGetData() {
//第一次获取数据
this.$axios
.get("/ping/", { params: {pagesize:this.queryInfo.pagesize, page: this.queryInfo.page } })
.then((res) => {
console.log("所有评论", res);
if (res.data.code == 200) {
this.lst = res.data.data;
this.total = res.data.total;
}
})
.catch((err) => {
return Promise.reject(err);
});
},
//每页的数据条数的需求,重新调用方法获取新的数据
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.queryInfo.pagesize = val;
this.fnGetData();
},
//识别到页数的变化,自动获取新的数据
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.queryInfo.page = val;
this.fnGetData();
},