elementUI Pagination 分页指定最大页（page-count）

在Element UI中，分页组件<el-pagination>的page-count属性用于指定总页数。如果你想动态设置最大页数，可以使用v-model:page-count来绑定一个响应式数据属性。

以下是一个简单的例子，展示如何动态设置最大页数：

<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :page-count="totalPageCount"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 1000, // 假设总数据量为1000
      totalPageCount: 1, // 初始化最大页数
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.updateTotalPageCount();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updateTotalPageCount();
    },
    updateTotalPageCount() {
      // 计算最大页数
      this.totalPageCount = Math.ceil(this.total / this.pageSize);
    }
  },
  mounted() {
    this.updateTotalPageCount(); // 组件加载完成后更新最大页数
  }
};
</script>

在这个例子中，totalPageCount是一个响应式数据属性，它会根据total和pageSize动态计算得到。每当pageSize或total发生变化时，updateTotalPageCount方法会被调用，更新totalPageCount的值，这样<el-pagination>组件的page-count属性就会相应地更新最大页数。