element-ui使用Pagination 分页

最新推荐文章于 2025-03-19 16:58:10 发布

永远在路上495

最新推荐文章于 2025-03-19 16:58:10 发布

阅读量1.2k

点赞数 1

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_67326908/article/details/126771133

版权

本文详细介绍了如何在Vue.js应用中使用分页组件，包括`page-size`、`total`和`current-page`等关键属性的解释，并提供了一个实际的代码示例。通过监听`size-change`和`current-change`事件，动态更新分页参数并重新获取数据。同时展示了数据请求方法`fnGetData`，以及在页数和每页条数改变时的处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们在使用分页时，虽然有源代码，但是使用的时候还是出错，所以简单总结一下怎么使用

我们直接拿最全的功能来写代码

我们先看各个变量的解释

page-size

每页显示条目个数，支持 .sync 修饰符

total

总条目数

number

current-page

当前页数，支持 .sync 修饰符

简单了解这三个已经足够了

<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-size="queryInfo.pagesize"
        :page-sizes="[1, 2, 5, 10]"
        layout="total, sizes, prev, pager, next ,jumper"
        :total="total"
      >
      </el-pagination>

data() {
    return {
      lst: [],
      total: 0,
      //参数
      queryInfo: {
        query: "",
        // 当前页数
        page: 1,
        // 显示一页多少条数据
        pagesize: 2,
      },
    };
  },

fnGetData() {
    //第一次获取数据
      this.$axios
        .get("/ping/", { params: {pagesize:this.queryInfo.pagesize, page: this.queryInfo.page } })
        .then((res) => {
          console.log("所有评论", res);
          if (res.data.code == 200) {
            this.lst = res.data.data;
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
//每页的数据条数的需求，重新调用方法获取新的数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryInfo.pagesize = val;
      this.fnGetData();
    },
//识别到页数的变化，自动获取新的数据
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryInfo.page = val;
      this.fnGetData();
    },