Vue组件中如何将嵌套的items数组合并为单个数组并取消分组统一渲染

很简单，咱们分两步就能搞定这个需求：

1. 合并所有items子数组为一维数组 #

在Vue组件里加一个计算属性，专门用来把两组数据里的所有items子数组合并成一个单独的数组，这样就彻底摆脱原来的分组结构啦。

假设你的两组数据分别存在groupData1和groupData2里（或者已经合并成一个名为data的二维数组），计算属性可以这么写：

computed: {
  mergedItems() {
    // 如果是两个独立数组，先合并所有分组对象
    const allGroups = [...this.groupData1, ...this.groupData2];
    // 用flatMap提取每个分组的items并自动合并成一维数组
    return allGroups.flatMap(group => group.items);
    
    // 如果你的原始数据是包含两组的二维数组（比如this.data = [[...], [...]]），就改成：
    // return this.data.flat().flatMap(group => group.items);
  }
}

flatMap会帮我们自动完成「遍历分组→提取items→展开合并」这一串操作，比手动循环push要简洁得多。

2. 修改模板统一渲染 #

接下来把原来的分组渲染模板简化，去掉所有和分组标题相关的元素，直接遍历合并后的数组：

<ul>
  <!-- 直接遍历合并好的mergedItems数组 -->
  <li v-for="item in mergedItems" :key="item.title">
    {{ item.value }}
  </li>
</ul>

⚠️ 小提示：如果你的item对象有唯一的id属性，把:key换成item.id会更稳妥，能避免重复渲染的问题。

这样修改后，所有分组里的子项就会被统一展示，完全看不到原来的分组结构啦~

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