1大家可以看看elementUI组件库,下面我把地址复制给大家
https://element.eleme.cn/#/zh-CN/component/pagination
大家可以先看看,加深印象,下面我们以这个完整版为例
2:在这里插入代码片
:page-sizes=“pageSizes” //这是下拉框可以选择的,每选择一行,要展示多少内容
:page-size=“queryinfo.size” //显示当前行的条数
layout=“total, sizes, prev, pager, next, jumper” :total=“total” //这是显示总共有多少数据,
<el-pagination style="margin-top: 20px;" @size-change="handleSizeChange"
@current-change="handleCurrentChange" :current-page="queryinfo.page" :page-sizes="pageSizes"
:page-size="queryinfo.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
3:data定义一下函数,请求的数据都是存放这里面
queryinfo: {
page: 1, //初始页
size: 10, // 每页的数据
},
pageSizes: [10, 20, 30, 40, 50, 100], //这是下拉框可以选择的,每选择一行,要展示多少内容
total: 0,
tableData :[],
4:methods里面的方法
created() {
this.GetchildGamelist(),
},
methods: {
//初始页page 初始每页size多少条数据
handleSizeChange(newSize) {
console.log(newSize);
this.queryinfo.size = newSize;
//重新刷新一下数据
this.GetchildGamelist();
console.log(this.queryinfo.size);
},
handleCurrentChange(newPage) {
console.log(newPage);
this.queryinfo.page = newPage;
//重新刷新一下数据
this.GetchildGamelist();
console.log(this.queryinfo.page); // 点击第几页
},
GetchildGamelist() {
//传递给后台的参数
let msg = {
page: this.queryinfo.page,
size: this.queryinfo.size,
}
GetGamelistinfo(msg).then(res => {
if (res.code == 200) {
this.total = Number(res.data.count)
this.tableData = res.data.data
} else {
this.$message.error('查询失败');
}
})
},
}
5:以上就可以实现完整版 分页,如有问题可以联系我呀,我们共同学习共同进步 谢谢