利用el-pagination实现分页效果（只讨论前端部分）

最新推荐文章于 2024-09-30 16:08:58 发布

m0_51933554

最新推荐文章于 2024-09-30 16:08:58 发布

阅读量407

点赞数

分类专栏： #vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/m0_51933554/article/details/127601101

版权

1.第一步，后端获得用户列表的查询参数queryInfo必须是

// 获取用户列表的参数对象
            queryInfo: {
                query: '',
                //当前的页数
                pagenum: 1,
                //当前每页显示多少条数据
                pagesize: 2,
            },

在data中定义这个参数对象

除此之外，分别定义userList: [],来存放获得的用户信息， total: 0,存放总的记录条数

  userList: [],
  total: 0,

2.第二步，获得获得用户列表的方法

        async getUserList() {
            const { data: res } = await this.$http.get('users', {
                params: this.queryInfo,
            });
            // 如果数据获取失败，提示失败信息
            if (res.meta.status !== 200)
                return this.$message.error('获取用户列表失败');
            // 如果数据获取成功,就把它保存到data中
            this.userList = res.data.users;
            this.total = res.data.total;
        },

3.第三步，从element