当前位置：首页 > VUE

vue中实现树

2026-02-19 13:54:35VUE

Vue 中实现树形结构的几种方法

使用递归组件

递归组件是Vue中实现树形结构的常见方式，通过组件调用自身实现嵌套展示。

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

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: Array
  }
}
</script>

使用第三方库

Vue生态中有许多成熟的树形组件库可供选择：

vue中实现树

Vue Draggable Tree：支持拖拽功能的树组件
Vue Tree Select：树形选择器
Element UI Tree：Element UI提供的树组件

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '一级节点',
        children: [{
          label: '二级节点'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>

手动渲染树结构

对于简单的树结构，可以直接使用v-for嵌套渲染。

<template>
  <div>
    <div v-for="item in treeData" :key="item.id">
      <div>{{ item.name }}</div>
      <div v-if="item.children" style="margin-left: 20px">
        <div v-for="child in item.children" :key="child.id">
          {{ child.name }}
        </div>
      </div>
    </div>
  </div>
</template>

动态加载树节点

对于大型树结构，可以实现动态加载子节点以提高性能。

vue中实现树

methods: {
  loadNode(node, resolve) {
    if (node.level === 0) {
      return resolve([{ name: '根节点' }]);
    }
    if (node.level > 3) return resolve([]);

    setTimeout(() => {
      const data = Array.from({ length: 2 }).map((_, i) => ({
        name: `${node.data.name}-${i}`,
        hasChildren: true
      }));
      resolve(data);
    }, 500);
  }
}

树形结构的数据格式

典型的树形数据结构通常采用以下格式：

const treeData = [
  {
    id: 1,
    name: '父节点',
    children: [
      {
        id: 2,
        name: '子节点1'
      },
      {
        id: 3,
        name: '子节点2',
        children: [...]
      }
    ]
  }
]