当前位置：首页 > VUE

vue递归实现树

2026-01-17 09:42:14VUE

递归实现树形结构的核心思路

在Vue中递归实现树形结构通常涉及组件自调用，通过组件的name属性实现递归渲染。关键点在于数据的嵌套结构和组件的递归终止条件。

基础树形组件实现

创建名为Tree.vue的组件，通过props接收树形数据：

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      {{ node.name }}
      <Tree v-if="node.children" :nodes="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Tree', // 必须定义name用于递归调用
  props: {
    nodes: {
      type: Array,
      required: true
    }
  }
}
</script>

数据结构示例

树形数据应遵循嵌套结构，每个节点包含children数组表示子节点：

const treeData = [
  {
    id: 1,
    name: 'Parent 1',
    children: [
      {
        id: 2,
        name: 'Child 1-1',
        children: [
          { id: 3, name: 'Grandchild 1-1-1' }
        ]
      }
    ]
  }
]

样式优化方案

添加缩进样式增强层级可视化效果：

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  margin: 5px 0;
}

动态控制展开/折叠

通过v-show和点击事件实现交互功能：

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <div @click="toggleExpand(node)">
        {{ node.expanded ? '▼' : '►' }} {{ node.name }}
      </div>
      <Tree 
        v-if="node.children" 
        v-show="node.expanded"
        :nodes="node.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Tree',
  props: ['nodes'],
  methods: {
    toggleExpand(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

性能优化建议

对于大型树结构，考虑以下优化手段：

使用虚拟滚动技术
实现延迟加载（懒加载子节点）
添加key属性时避免使用数组索引

完整可运行示例

<template>
  <div>
    <Tree :nodes="treeData"/>
  </div>
</template>

<script>
import Tree from './Tree.vue'

export default {
  components: { Tree },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'Root',
          expanded: true,
          children: [
            {
              id: 2,
              name: 'Branch A',
              expanded: false,
              children: [
                { id: 3, name: 'Leaf A1' },
                { id: 4, name: 'Leaf A2' }
              ]
            },
            {
              id: 5,
              name: 'Branch B',
              expanded: false,
              children: [
                { id: 6, name: 'Leaf B1' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

vue递归实现树