在表格<el-table>后增加一个分页组件
@size-change=“handleSizeChange”:每页显示条数变化后调用方法
@current-change=“handleCurrentChange”:页码变化调用方法
:current-page=“queryInfo.pagenum”:当前页数
:page-sizes="[1, 2, 5,10]":显示条数下拉选择数组
:page-size=“queryInfo.pagesize”:每页显示多少行
layout=“total, sizes, prev, pager, next, jumper”:布局,即可选显示那些细节
:total=“total” :总条数
javascript"></el-table>
<!--分页区域-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
methods中添加每页显示数据条数变化的函数和页码值变化的函数
javascript"> methods: {
//初始化这个组件会调用getUserList,从而发起一次axios请求,返回一个promise对象,为了简化promise操作
//我们可以使用async和await来优化这次异步请求,紧接着我们会得到一个数据对象,从这个数据对象里我们可以解构赋值出一个data属性
//将其重命名为res
async getUserList() {
const { data: res } = await this.$http.get('users', { params: this.queryInfo })
console.log(res)
if (res.meta.status !== 200) return this.$message.error('获取用户列表失败')
this.userList = res.data.users
this.total = res.data.total
console.log(this.userList)
},
/*监听 pagesize 改变的事件*/
handleSizeChange(newSize) {
// console.log(newSize)
this.queryInfo.pagesize = newSize
// 更改每页显示数据后重新获取数据
this.getUserList()
},
// 监听 页码值 改变的事件
handleCurrentChange(newPage){
// console.log(newPage)
this.queryInfo.pagenum = newPage
this.getUserList()
}
}
太贴近表格了,在globe.css中加入
javascript">.el-pagination{
margin-top: 15px;
}
效果: