element 分页 el-pagination

2023-12-27 19:48:28
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="pagination.pageNum"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
  data() {
    return {
      pagination: {
        total: 100,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    //监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.pagination.pageSize = newSize;
      this.getList();
    },
    //只要页码值发生变化就触发事件
    handleCurrentChange(newPage) {
      this.pagination.pageNum = newPage;
      this.getList();
    },
  },

文章来源:https://blog.csdn.net/m0_70265923/article/details/135253106
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。