实现分页效果

在表格后增加一个分页组件

&＃64;size-change&＃61;“handleSizeChange”&＃xff1a;每页显示条数变化后调用方法
&＃64;current-change&＃61;“handleCurrentChange”&＃xff1a;页码变化调用方法
:current-page&＃61;“queryInfo.pagenum”&＃xff1a;当前页数
:page-sizes&＃61;"[1, 2, 5,10]"&＃xff1a;显示条数下拉选择数组
:page-size&＃61;“queryInfo.pagesize”&＃xff1a;每页显示多少行
layout&＃61;“total, sizes, prev, pager, next, jumper”&＃xff1a;布局&＃xff0c;即可选显示那些细节
:total&＃61;“total” &＃xff1a;总条数

</el-table><!--分页区域--><el-pagination&＃64;size-change&＃61;"handleSizeChange"&＃64;current-change&＃61;"handleCurrentChange":current-page&＃61;"queryInfo.pagenum":page-sizes&＃61;"[1, 2, 5, 10]":page-size&＃61;"queryInfo.pagesize"layout&＃61;"total, sizes, prev, pager, next, jumper":total&＃61;"total"></el-pagination>


methods中添加每页显示数据条数变化的函数和页码值变化的函数

methods: {//初始化这个组件会调用getUserList&＃xff0c;从而发起一次axios请求&＃xff0c;返回一个promise对象&＃xff0c;为了简化promise操作//我们可以使用async和await来优化这次异步请求&＃xff0c;紧接着我们会得到一个数据对象&＃xff0c;从这个数据对象里我们可以解构赋值出一个data属性//将其重命名为resasync getUserList() {const { data: res } &＃61; await this.$http.get(&＃39;users&＃39;, { params: this.queryInfo })console.log(res)if (res.meta.status !&＃61;&＃61; 200) return this.$message.error(&＃39;获取用户列表失败&＃39;)this.userList &＃61; res.data.usersthis.total &＃61; res.data.totalconsole.log(this.userList)},/*监听 pagesize 改变的事件*/handleSizeChange(newSize) {// console.log(newSize)this.queryInfo.pagesize &＃61; newSize// 更改每页显示数据后重新获取数据this.getUserList()},// 监听 页码值 改变的事件handleCurrentChange(newPage){// console.log(newPage)this.queryInfo.pagenum &＃61; newPagethis.getUserList()}}


太贴近表格了&＃xff0c;在globe.css中加入

.el-pagination{margin-top: 15px;
}


效果&＃xff1a;