vue+elementui实现分页效果

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：以上就可以实现完整版 分页，如有问题可以联系我呀，我们共同学习共同进步 谢谢