vue+elementui 表格分页限制最大页码数

在Vue中使用Element UI的表格组件时，可以通过自定义分页组件来限制最大页码数。以下是一个简单的示例，展示了如何实现这一功能：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <!-- 表格列定义 -->
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    :layout="'total, sizes, prev, pager, next, jumper'"
    :total="total"
    :max="maxPage">
  </el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 0, // 总条目数
      maxPage: 100 // 最大页码数
    };
  },
  methods: {
    // 分页大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentChange(this.currentPage);
    },
    // 当前页改变时触发
    handleCurrentChange(val) {
      this.currentPage = val;
      this.currentChange(val);
    },
    // 当前页码大于最大页码数时，重置为最大页码
    currentChange(page) {
      if (page > this.maxPage) {
        this.currentPage = this.maxPage;
        this.$refs.pagination.internalCurrentPage = this.maxPage;
      }
      // 加载表格数据的逻辑...
    }
  }
};
</script>

在这个示例中，我们定义了一个maxPage属性，它代表了分页组件的最大页码数。在handleCurrentChange方法中，我们检查了当前页码是否大于maxPage，如果是，则将当前页码重置为maxPage，并更新了分页组件的当前页码。这样就能够限制用户跳转到超过最大页码数的页面。