Vue.js分组对象分页：如何对JavaScript对象进行切片分页？

嘿，这个场景我在做Vue后台项目的时候刚好碰到过！用_.groupBy得到的分组对象确实没法直接做分页切片，核心解决思路就是先把无序的对象转换成有序的数组结构，之后就能复用常规的数组分页逻辑了。下面给你一步步拆解方案：

一、把分组对象转成可分页的数组 #

JavaScript对象的键虽然在ES6+有了一定的顺序，但毕竟不是为有序访问设计的，所以第一步就是用Object.entries()把分组对象转成键值对数组，再包装成更易操作的结构：

// 假设groupedObject是_.groupBy返回的结果
const groupedArray = Object.entries(groupedObject).map(([parentRegion, items]) => ({
  parentRegion, // 父区域名称
  items // 该父区域下的所有子项数组
}));

这样得到的groupedArray就是一个标准数组，每个元素对应一个分组，完全支持索引访问和slice()切片操作。如果需要固定分组的展示顺序，还可以加个排序逻辑，比如按父区域名称排序：

const groupedArray = Object.entries(groupedObject)
  .sort(([regionA], [regionB]) => regionA.localeCompare(regionB)) // 按字符串排序
  .map(([parentRegion, items]) => ({
    parentRegion,
    items
}));

二、在Vue中实现分页逻辑 #

有了有序数组之后，分页就和普通列表分页一模一样了。我们可以用Vue的计算属性来处理分页后的分组数据：

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      rawArray: [{region: 'region1', parent_region: 'parent_region1'}, /* 更多数据 */],
      currentPage: 1,
      pageSize: 2 // 每页展示2个分组
    };
  },
  computed: {
    groupedObject() {
      return _.groupBy(this.rawArray, 'parent_region');
    },
    groupedArray() {
      // 转成有序数组并排序
      return Object.entries(this.groupedObject)
        .sort(([a], [b]) => a.localeCompare(b))
        .map(([parentRegion, items]) => ({ parentRegion, items }));
    },
    totalPages() {
      // 计算总页数
      return Math.ceil(this.groupedArray.length / this.pageSize);
    },
    paginatedGroups() {
      // 切片得到当前页的分组
      const start = (this.currentPage - 1) * this.pageSize;
      return this.groupedArray.slice(start, start + this.pageSize);
    }
  },
  methods: {
    changePage(page) {
      // 切换页码的方法，做个简单的边界判断
      if (page < 1 || page > this.totalPages) return;
      this.currentPage = page;
    }
  }
};
</script>

三、渲染嵌套表格 #

在模板里循环paginatedGroups即可渲染分页后的嵌套表格，外层是分组的父区域标题，内层是该分组下的子项：

<template>
  <div class="group-table-container">
    <!-- 分页控件 -->
    <div class="pagination">
      <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
    </div>

    <!-- 嵌套表格 -->
    <table v-for="group in paginatedGroups" :key="group.parentRegion" class="group-table">
      <thead>
        <tr>
          <th colspan="2" class="group-header">{{ group.parentRegion }}</th>
        </tr>
        <tr>
          <th>子区域名称</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in group.items" :key="item.region">
          <td>{{ item.region }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

四、更适合的数据结构？ #

其实从需求出发，有序数组就是最适合的结构——它天然支持索引访问、切片、排序，完全适配分页场景。如果你的业务需要频繁对分组做增删或分页操作，建议在分组后直接转换成上述的数组结构，而不是保留原对象。

如果需要额外保证父区域的唯一性，数组里的每个分组对象已经包含了唯一的parentRegion，完全能满足需求。

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