vue 循环数组将里面数组合并

Vue 中如果想要循环一个数组并将其内部的数组合并，你可以使用 `v-for`指令配合 `map` 或 `flat` 方法。假设你有一个嵌套数组 `items`：

<template>
  <div>
    <ul>
      <li v-for="item in flatItems" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1-1' },
        { id: 2, text: 'Item 1-2' },
        { id: 3, text: 'Item 2-1', children: [{ id: 4, text: 'Child of Item 2-1' }] },
      ],
    };
  },
  computed: {
    flatItems() {
      // 使用 map 或者 flat 变换嵌套结构
      return this.items.flatMap(item => (Array.isArray(item.children) ? item.children : [item]));
    },
  },
};
</script>

在这个例子中，`flatItems` 计算属性会返回一个扁平化的数组，包含了所有层级的元素。`flatMap` 方法用于处理数组的嵌套结构，如果 `item.children` 是数组，则展开它；如果不是数组，则直接添加到结果数组。