Vue中如何根据父级文件夹ID关联显示子级分组数组？

我明白你的问题啦——现在所有分组都跑到每个文件夹下面了，对吧？核心就是要把每个分组通过folder_id和它所属的文件夹id匹配起来，这里有两种实用的实现方式，你可以按需选择：

方法一：模板内直接过滤（快速实现） #

直接在分组的v-for指令里添加过滤逻辑，只渲染当前文件夹对应的分组。修改你的HTML代码中分组循环的部分：

<div v-for="(folder, index) in list_folders" :key="folder.id" class="d-block mb-11" >
  <div class="d-flex align-items-center mb-5">
    <i class="fas fa-folder me-3 fs-30 text-primary"></i>
    <span @click="showModalEditFolder(index)" class="text-primary fs-15 cursor-pointer" >{{ folder.name }}</span >
  </div>
  <div class="d-block">
    <ul class="list-unstyled m-0">
      <!-- 这里添加filter过滤出当前文件夹对应的分组 -->
      <li v-for="group in list_groups.filter(g => g.folder_id === folder.id)" :key="group.id" class="d-flex align-items-center mb-3" >
        <input class="form-check-input w--4 h--4 rounded-0 m-0 me-6" type="checkbox" :value="group.id" :id="group.id" />
        <div class="w--11 h--11 me-3">
          <img :src="group.avatar" alt="group-avatar" class="img-cover w-100" />
        </div>
        <label :for="group.id" class="form-check-label"> {{ group.name }} </label>
        <div class="ms-auto">
          <input type="checkbox" class="btn-check" :id="`notify${group.id}`" v-model="group.notify_option" :true-value="1" :false-value="0" />
          <label class="fs-15 text-primary cursor-pointer" :for="`notify${group.id}`" >{{ group.notify_option === 1 ? $t('common.select.notify') : $t('common.select.no_notify') }}</label >
        </div>
      </li>
    </ul>
  </div>
</div>

说明 #

• 这个方法的好处是无需修改数据逻辑，直接在模板里完成匹配，适合快速调试或数据量较小的场景。
• 缺点是每次渲染文件夹时都会执行一次filter，如果文件夹和分组数量较多，可能会有轻微的性能开销。

方法二：数据预处理（性能更优，推荐） #

如果你的数据量比较大，或者想让逻辑更清晰，可以在获取到文件夹和分组数据后，提前把分组按folder_id整理好，这样模板里直接取用即可：

步骤1：添加数据属性 #

在你的组件数据中新增一个groupsByFolderId对象，用来存储按文件夹ID分组的分组列表：

// 组件数据定义
data() {
  return {
    list_folders: [],
    list_groups: [],
    groupsByFolderId: {} as Record<number, typeof this.list_groups[0][]>
  }
}

步骤2：整理分组数据 #

在获取完文件夹和分组数据后，调用一个方法来整理分组：

getFolders() {
  let data: any[] = [
    { id: 100, name: '店舗', order_position: 1 },
    { id: 101, name: '東日本統括部', order_position: 2 }
  ]
  this.list_folders = data
  // 获取完文件夹后，检查分组是否已加载，若已加载则整理数据
  if (this.list_groups.length) {
    this.prepareGroupData()
  }
}

getGroupsOfUser() {
  let data: any[] = [
    { id: 200, folder_id: 100, avatar: require('@/assets/images/group-avatar2.png'), order_position: 1, name: '仙台営業所', notify_option: 0 },
    { id: 201, folder_id: 101, avatar: require('@/assets/images/group-avatar3.png'), order_position: 2, name: '東日本統括部', notify_option: 1 }
  ]
  this.list_groups = data
  // 获取完分组后，检查文件夹是否已加载，若已加载则整理数据
  if (this.list_folders.length) {
    this.prepareGroupData()
  }
}

// 新增的整理数据方法
prepareGroupData() {
  this.groupsByFolderId = this.list_groups.reduce((acc, group) => {
    // 如果当前folder_id还没有对应的数组，就初始化一个
    if (!acc[group.folder_id]) {
      acc[group.folder_id] = []
    }
    acc[group.folder_id].push(group)
    return acc
  }, {} as Record<number, typeof this.list_groups[0][]>)
}

步骤3：修改模板渲染 #

在模板里直接取用整理好的分组数据：

<div v-for="(folder, index) in list_folders" :key="folder.id" class="d-block mb-11" >
  <div class="d-flex align-items-center mb-5">
    <i class="fas fa-folder me-3 fs-30 text-primary"></i>
    <span @click="showModalEditFolder(index)" class="text-primary fs-15 cursor-pointer" >{{ folder.name }}</span >
  </div>
  <div class="d-block">
    <ul class="list-unstyled m-0">
      <!-- 直接取对应文件夹ID的分组，用|| []避免文件夹没有分组时报错 -->
      <li v-for="group in groupsByFolderId[folder.id] || []" :key="group.id" class="d-flex align-items-center mb-3" >
        <input class="form-check-input w--4 h--4 rounded-0 m-0 me-6" type="checkbox" :value="group.id" :id="group.id" />
        <div class="w--11 h--11 me-3">
          <img :src="group.avatar" alt="group-avatar" class="img-cover w-100" />
        </div>
        <label :for="group.id" class="form-check-label"> {{ group.name }} </label>
        <div class="ms-auto">
          <input type="checkbox" class="btn-check" :id="`notify${group.id}`" v-model="group.notify_option" :true-value="1" :false-value="0" />
          <label class="fs-15 text-primary cursor-pointer" :for="`notify${group.id}`" >{{ group.notify_option === 1 ? $t('common.select.notify') : $t('common.select.no_notify') }}</label >
        </div>
      </li>
    </ul>
  </div>
</div>

说明 #

• 这个方法只在数据加载完成后执行一次整理，后续渲染时直接取用，性能更好，也让模板逻辑更简洁。
• 因为你提到每个文件夹对应一个分组，所以groupsByFolderId[folder.id]会是一个只有一个元素的数组，渲染出来就是单个分组，完全符合你的预期。

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