当前位置：首页 > VUE

vue 递归实现树

2026-03-28 18:26:02VUE

递归实现树形结构

在 Vue 中递归实现树形结构通常用于展示层级数据，例如文件目录、组织架构等。以下是实现方法：

组件结构设计

创建两个组件：Tree 和 TreeNode。Tree 是入口组件，TreeNode 是递归组件。

vue 递归实现树

<!-- Tree.vue -->
<template>
  <div class="tree">
    <TreeNode v-for="node in treeData" :key="node.id" :node="node"/>
  </div>
</template>

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

export default {
  components: { TreeNode },
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

递归组件实现

<!-- TreeNode.vue -->
<template>
  <div class="tree-node">
    <div @click="toggle">
      {{ node.name }}
      <span v-if="hasChildren">{{ isOpen ? '-' : '+' }}</span>
    </div>
    <div v-show="isOpen && hasChildren" class="children">
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length
    }
  },
  methods: {
    toggle() {
      if (this.hasChildren) {
        this.isOpen = !this.isOpen
      }
    }
  }
}
</script>

数据格式要求

树形数据需要符合特定格式才能正确渲染：

vue 递归实现树

const treeData = [
  {
    id: 1,
    name: 'Node 1',
    children: [
      {
        id: 2,
        name: 'Node 1.1',
        children: []
      }
    ]
  }
]

样式优化

添加基础样式增强视觉效果：

.tree-node {
  margin-left: 20px;
  cursor: pointer;
}

.children {
  border-left: 1px dashed #ccc;
  padding-left: 10px;
}

性能优化建议

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

添加虚拟滚动支持
实现延迟加载
使用唯一键标识节点
添加节点展开/折叠动画

完整示例使用

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

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

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

这种实现方式简洁高效，适用于大多数树形结构展示需求。通过递归组件可以轻松处理任意深度的嵌套数据。