Vue中使用v-for按唯一MainOrg生成独立表格及分组问题

你现在的问题是直接遍历整个数据数组，导致每个子机构都生成一个表格，重复了MainOrg。解决思路是先把数据按MainOrg分组，再遍历分组后的结果生成表格，具体步骤如下：

1. 用计算属性分组数据 #

在Vue组件里加一个计算属性，把原始数组按MainOrg整理成键值对形式：键是MainOrg的值，值是对应子机构的数组：

computed: {
  groupedByMainOrg() {
    return this.data.reduce((grouped, item) => {
      const mainOrg = item.MainOrg;
      if (!grouped[mainOrg]) {
        grouped[mainOrg] = [];
      }
      grouped[mainOrg].push(item);
      return grouped;
    }, {});
  }
}

2. 遍历分组生成表格 #

在模板里用Object.entries把分组对象转成可遍历的键值对数组，每个分组对应一个表格：

<div v-for="(subOrgs, mainOrg) in groupedByMainOrg" :key="mainOrg" class="s-table-container">
  <h2>{{ mainOrg }}</h2>
  <table class="s-table">
    <thead>
      <tr>
        <th style="text-align: left;">SubOrgId</th>
        <th>SubOrgName</th>
        <th>SubOrgState</th>
        <th>TotalOrgs</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="subOrg in subOrgs" :key="`${subOrg.SubOrgId}-${subOrg.SubOrgName}`">
        <td style="text-align: left;">{{ subOrg.SubOrgId }}</td>
        <td>{{ subOrg.SubOrgName }}</td>
        <td>{{ subOrg.SubOrgState }}</td>
        <td>{{ subOrg.TotalOrgs }}</td>
      </tr>
    </tbody>
  </table>
</div>

• 分组的key用MainOrg保证唯一；子机构的key用SubOrgId+SubOrgName，避免相同SubOrgId的不同子机构出现重复key警告。

两种写法的核心差异在于处理对象的方式，直接导致了IN0110分组的长度不一致：

差异本质 #

• forEach写法：直接把整个原始对象objpush到分组数组里，保留了对象的所有字段（包括region）。
• reduce写法：用解构{ region, ...rest }把region单独提取出来，只把剩下的字段组成的rest对象push到数组中。

长度不一致的具体原因 #

最可能的情况是：
你的estabSearchResult里有一个region为IN0110的对象，它除了region之外的所有字段和数组里另一个对象完全一样。在reduce的逻辑里，这个重复的rest可能因为某些隐式逻辑（比如响应式对象解构异常、或后续有未提及的去重处理）没被正确加入数组，导致长度少1；而forEach直接push原始对象，哪怕内容重复也会保留，所以得到了正确的长度3。

另一种可能是字段名不匹配：如果原始数据里的分组字段实际是Region（大写R），而你在reduce里写的是region（小写），那解构出来的region是undefined，这个对象会被分到undefined分组，导致IN0110分组少一个元素。不过你说其他分组结果一致，这种可能性比较低。

修复reduce写法的方法 #

把reduce改成和forEach一样直接push原始对象，逻辑对齐后结果就会一致：

computed: {
  regions: ({ estabSearchResult }) =>
    estabSearchResult.reduce(
      (map, obj) => ({
        ...map,
        [obj.region]: [...(map[obj.region] ?? []), obj],
      }),
      {}
    ),
},

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