这种分页是根据前端输入的页码,页大小去后端获取相应的数据(后端分页),
当然也可以把后端数据全部获取到,在前端做分页详细见前端做分页
elementui
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
<!-- 分页功能-->
<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>
<script>
export default {
data() {
return {
// 查询用户列表的参数对象
queryInfo: {
query: "",
pagenum: 1, //页码
pagesize: 5, // 页大小
},
// 用户列表数据
userList: [],
// 总条数
total:0,
};
},
created() {
this.getUserList();
},
methods: {
// 获取用户列表数据
async getUserList() {
const { data: res } = await this.$http.get("users", {
params: this.queryInfo,
});
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(pagesize){
// 改变pagesize的大小
this.queryInfo.pagesize = pagesize
// 重新加载用户列表数据
this.getUserList()
},
// 监听pagenum的事件(点击第几页)
handleCurrentChange(pagenum){
// 把页码改了
this.queryInfo.pagenum=pagenum
// 重新加载用户列表数据
this.getUserList()
}
},
};
</script>