当前位置：首页 > VUE

vue实现多级列表

2026-02-19 05:38:48VUE

Vue 实现多级列表的方法

递归组件法

递归组件是处理多级列表的经典方案，通过组件自身调用自身实现无限层级渲染。

实现步骤：

定义递归组件，通过 name 属性使组件可以调用自身
使用 v-for 遍历数据，通过条件判断控制子级渲染
通过 props 传递层级数据

示例代码：

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

<script>
export default {
  name: 'TreeList',
  props: {
    list: {
      type: Array,
      required: true
    }
  }
}
</script>

动态组件法

通过动态组件绑定实现多级渲染，适合需要灵活控制组件类型的场景。

实现要点：

vue实现多级列表

使用 component 标签配合 is 属性
通过 v-for 循环渲染不同层级的组件
利用 provide/inject 跨层级传递数据

示例代码：

<template>
  <component 
    :is="`level-${level}`" 
    v-for="item in data"
    :key="item.id"
    :item="item"
  />
</template>

<script>
export default {
  components: {
    'level-1': { /* 一级组件实现 */ },
    'level-2': { /* 二级组件实现 */ }
  },
  props: {
    data: Array,
    level: Number
  }
}
</script>

组合式 API 实现

使用 Vue 3 的组合式 API 可以更灵活地管理多级列表状态。

实现技巧：

vue实现多级列表

使用 reactive 或 ref 管理列表数据
通过计算属性处理层级关系
利用 watch 监听数据变化

示例代码：

<template>
  <div v-for="item in treeData" :key="item.id">
    <div @click="toggle(item)">
      {{ item.name }}
    </div>
    <div v-if="item.expanded && item.children">
      <tree-node :nodes="item.children"/>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  nodes: Array
})

const treeData = ref(props.nodes)

function toggle(node) {
  node.expanded = !node.expanded
}
</script>

第三方库方案

对于复杂场景，可以考虑使用专门处理树形结构的库：

vue-tree-list：提供拖拽、复选框等高级功能
vue-treeselect：适合选择器场景
element-ui 的 el-tree：企业级 UI 解决方案

集成示例：

<template>
  <vue-tree-list
    :model="treeData"
    @click="onClick"
  />
</template>

<script>
import { VueTreeList } from 'vue-tree-list'

export default {
  components: {
    VueTreeList
  },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          { name: 'Child 1' },
          { name: 'Child 2' }
        ]
      }
    }
  }
}
</script>