当前位置：首页 > VUE

vue列表实现父子级

2026-02-24 13:00:49VUE

Vue 列表实现父子级的方法

在 Vue 中实现父子级列表通常涉及递归组件或嵌套数据结构。以下是几种常见实现方式：

递归组件实现

递归组件适合处理无限层级或深度不确定的树形数据：

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <tree-list v-if="item.children" :treeData="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeList',
  props: ['treeData']
}
</script>

嵌套 v-for 实现

适用于已知固定层级的结构：

<template>
  <div v-for="parent in listData" :key="parent.id">
    <div>{{ parent.name }}</div>
    <ul>
      <li v-for="child in parent.children" :key="child.id">
        {{ child.name }}
      </li>
    </ul>
  </div>
</template>

动态组件实现

结合计算属性处理复杂层级关系：

computed: {
  processedData() {
    return this.rawData.map(item => {
      return {
        ...item,
        hasChildren: item.children && item.children.length > 0
      }
    })
  }
}

状态管理方案

使用 Vuex 管理层级数据时：

const store = new Vuex.Store({
  state: {
    treeData: [
      {
        id: 1,
        name: 'Parent',
        children: [
          { id: 2, name: 'Child' }
        ]
      }
    ]
  },
  getters: {
    getChildren: state => parentId => {
      const parent = state.treeData.find(item => item.id === parentId)
      return parent ? parent.children : []
    }
  }
})

关键注意事项

必须为每个列表项设置唯一的 :key
深层嵌套数据建议使用递归组件
大数据量考虑虚拟滚动优化性能
可结合 v-show 实现折叠/展开功能
复杂交互建议使用专门的状态管理库

性能优化技巧

对于大型树形结构：

vue列表实现父子级

// 使用懒加载
methods: {
  loadChildren(parent) {
    if (!parent.childrenLoaded) {
      fetchChildren(parent.id).then(children => {
        Vue.set(parent, 'children', children)
        Vue.set(parent, 'childrenLoaded', true)
      })
    }
  }
}

以上方法可根据具体场景组合使用，递归组件适合动态深度结构，嵌套 v-for 适合简单固定层级，状态管理适合复杂应用。