element分页 el-pagination及自定义total文字内容

一路向北.　

已于 2024-01-05 18:12:03 修改

阅读量1.7k

点赞数 10

文章标签： vue.js javascript 前端

于 2023-12-27 18:40:33 首次发布

本文链接：https://blog.csdn.net/m0_70265923/article/details/135253106

版权

本文介绍了如何在Vue应用中使用el-pagination组件进行分页，包括设置总数据量、每页大小，以及通过size-change和current-change事件实现页面大小和当前页的动态切换并重新加载数据。

摘要由CSDN通过智能技术生成

      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 40]"
        :total="pagination.total"
        :current-page="pagination.pageNum"
        :page-size="pagination.pageSize"
        @size-change="pageSizeChange"
        @current-change="pageNumChange"
      />

  data() {
    return {
      pagination: {
        total: 100,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },

  methods: {
    //显示条数发生变化触发该事件
    pageSizeChange(newSize) {
      this.pagination.pageSize = newSize;
      this.getList();
    },
    //页码发生变化触发该事件
    pageNumChange(newPage) {
      this.pagination.pageNum = newPage;
      this.getList();
    },
  },

  mounted() {
    const pagination__total = document.querySelector(
      ".el-pagination__total"
    );
    pagination__total.innerText = `总共 ${this.pagination.total} 组数据`;
  },