Vue.js中数据数组排序分页异常问题求助

问题根源分析 #

你遇到的分页空白问题，核心原因是筛选后未重置当前页码：当你在第10页执行筛选时，筛选后的数据集总页数可能远小于10，此时indexStart的计算值会超出筛选后数组的长度，slice返回空数组，导致页面无内容。此外代码还有几个细节问题：

• 在计算属性fileteredArray中调用修改currentArray的方法，违反了计算属性应保持纯函数的原则
• 筛选方法中错误使用array.field而非当前项family.field，逻辑无效
• 页数计算用Math.round会导致页数统计错误（比如6条数据每页5条，应该是2页，round会得到1页）
• 模板中调用的pagesAmount()未定义，导致分页按钮逻辑异常

修正后的代码实现 #

1. 完整代码重构 #

<template>
  <div>
    <table>
      <tr v-for="(family, index) in paginatedArray" :key="index">
        <!-- 你的表格内容 -->
      </tr>
    </table>
    <!-- 分页控件 -->
    <p style="float:right;margin-right:5px;">
      <i 
        v-if="current > 1" 
        @click="prev()" 
        style="color:#0575ff;margin-right:15px;" 
        class="fa-solid fa-chevron-left"
      ></i>
      <i 
        v-else 
        style="color:#54595f;margin-right:15px;" 
        class="fa-solid fa-chevron-left"
      ></i>
      
      <span v-for="number in totalPages" :key="number">
        <b style="padding:2px" v-if="number === current">{{number}}</b>
        <small v-else @click="jumpToPage(number)">{{number}}</small>
      </span>
      
      <i 
        v-if="current < totalPages" 
        @click="next()" 
        style="color:#0575ff;margin-left:15px" 
        class="fa-solid fa-chevron-right"
      ></i>
      <i 
        v-else 
        style="color:#54595f;margin-left:15px" 
        class="fa-solid fa-chevron-right"
      ></i>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      pageSize: 5,
      families: [] // 原始数据集
    }
  },
  computed: {
    // 先得到筛选后的完整数据集
    filteredFamilies() {
      let result = [...this.families];
      // 执行多重筛选
      result = this.filterProductsBySomething1(result);
      result = this.filterProductsBySomething2(result);
      // 筛选后自动修正页码，避免超出范围
      if (this.current > this.totalPages) {
        this.current = this.totalPages || 1;
      }
      return result;
    },
    // 分页后的数据集
    paginatedArray() {
      const start = (this.current - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredFamilies.slice(start, end);
    },
    // 总页数计算（用Math.ceil确保向上取整）
    totalPages() {
      return Math.ceil(this.filteredFamilies.length / this.pageSize);
    }
  },
  methods: {
    prev() {
      if (this.current > 1) {
        this.current--;
      }
    },
    next() {
      if (this.current < this.totalPages) {
        this.current++;
      }
    },
    jumpToPage(pageNum) {
      if (pageNum >= 1 && pageNum <= this.totalPages) {
        this.current = pageNum;
      }
    },
    filterProductsBySomething1(array) {
      // 修正：使用当前项family的field，而非整个array
      return array.filter(family => family.field.includes("xxx"));
    },
    filterProductsBySomething2(array) {
      return array.filter(family => family.field.includes("xxx"));
    }
  }
}
</script>

2. 关键修复点说明 #

• 自动修正页码：在filteredFamilies计算属性中，每次筛选后检查当前页码是否超出总页数，超出则自动重置为最后一页或第1页
• 纯函数化计算属性：将筛选和分页逻辑拆分，避免在计算属性中修改data状态
• 修正筛选逻辑：把array.field改为family.field，确保筛选针对每一项数据生效
• 正确计算总页数：用Math.ceil替代Math.round，保证页数统计准确
• 完善分页控件逻辑：添加页码跳转功能，优化禁用状态的判断条件

内容的提问来源于stack exchange，提问作者zirson