当前位置：首页 > VUE

vue实现tree

2026-02-10 08:30:16VUE

Vue 实现 Tree 组件

在 Vue 中实现 Tree 组件通常涉及递归组件、动态渲染和状态管理。以下是实现 Tree 组件的几种常见方法。

递归组件实现

递归组件是 Tree 结构的核心，通过组件调用自身实现无限层级的树形结构。

<template>
  <div>
    <tree-node :node="treeData" @on-expand="handleExpand"></tree-node>
  </div>
</template>

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: {
        label: 'Root',
        children: [
          { label: 'Child 1', children: [] },
          { label: 'Child 2', children: [] }
        ]
      }
    };
  },
  methods: {
    handleExpand(node) {
      console.log('Expanded:', node.label);
    }
  }
};
</script>

<!-- TreeNode.vue -->
<template>
  <div>
    <div @click="toggleExpand">
      {{ node.label }}
    </div>
    <div v-if="isExpanded && node.children.length">
      <tree-node
        v-for="child in node.children"
        :key="child.label"
        :node="child"
        @on-expand="$emit('on-expand', child)"
      ></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: { type: Object, required: true }
  },
  data() {
    return {
      isExpanded: false
    };
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
      this.$emit('on-expand', this.node);
    }
  }
};
</script>

使用第三方库

如果需要更复杂的功能（如拖拽、复选框等），可以直接使用成熟的 Tree 组件库。

vue实现tree

Vue Draggable Tree：支持拖拽排序。
```
npm install vue-draggable-tree
```
Vuejs Tree：功能丰富的树形组件。
```
npm install vuejs-tree
```

Element UI Tree（适用于 Element UI 项目）：

<el-tree :data="treeData" :props="defaultProps"></el-tree>

动态加载数据

对于大数据量的树形结构，可以通过动态加载子节点优化性能。

methods: {
  loadNode(node, resolve) {
    if (node.level === 0) {
      return resolve([{ label: 'Root' }]);
    }
    if (node.level > 3) return resolve([]);

    setTimeout(() => {
      const children = Array.from({ length: 3 }).map((_, i) => ({
        label: `Child ${i + 1}`,
        hasChildren: true
      }));
      resolve(children);
    }, 500);
  }
}

自定义样式与交互

通过插槽和事件实现高度自定义的 Tree 组件。

<tree-node :node="treeData">
  <template #default="{ node }">
    <span :class="{ 'is-leaf': !node.children }">{{ node.label }}</span>
  </template>
</tree-node>