el-pagination切换分页大小问题?

Question

el-pagination切换分页大小问题?

新手上路，请多包涵

vue的el-pagination切换分页大小触发size-change方法
例如现在又100条数据初始pageSize为10，pageNum为1 ，即共10页
现在我切换到第10页即pageNum = 10 ，现在我切换pageSize为 100，那只会存在1页数据但是我的pageNum = 10 这种情况下不会出现错误嘛

1

vue.js element-ui pagination

阅读 1.3k

AI BotBETA

在使用 Element UI 的 el-pagination 组件时，如果你遇到切换分页大小（pageSize）后页面索引（pageNum）与新的分页大小不匹配的情况，确实需要适当处理以避免显示错误或空白页面。在你的例子中，当用户从 pageSize=10 切换到 pageSize=100 时，如果当前页 pageNum 是10，那么理论上应该显示的数据不存在（因为总共只有1页数据），这会导致用户看到的数据不正确或者没有数据可显示。

为了处理这种情况，你可以通过监听 size-change 事件来调整 pageNum 的值。一种常见的做法是在 size-change 事件处理函数中，如果新的分页大小导致当前页的数据不存在（即 pageNum 大于或等于以新 pageSize 计算的总页数），则将 pageNum 重置为1（或你希望显示的任何合理值）。

下面是一个简单的示例代码，展示了如何在 Vue 组件中处理这个问题：

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100, // 假设总共有100条数据
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      // 计算新的总页数
      const newTotalPages = Math.ceil(this.total / this.pageSize);
      // 如果当前页大于新总页数，则将当前页重置为1
      if (this.currentPage > newTotalPages) {
        this.currentPage = 1;
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

在这个例子中，当用户更改分页大小时，handleSizeChange 方法会被触发。这个方法首先更新 pageSize 的值，然后计算基于新分页大小的总页数。如果当前页大于或等于这个新计算出的总页数，它会将当前页重置为1。这样可以确保用户始终看到有效的数据页面。

1 个回答

得票最新

陟上晴明

21.2k124691

发布于
10 月 14 日浙江

改变 pageSize 之后需要把 pageNum 重置为 1

撰写回答