当前位置：首页 > VUE

vue实现多个树状图

2026-02-25 18:44:52VUE

Vue实现多个树状图的方法

使用Element UI的Tree组件

Element UI提供了成熟的Tree组件，支持多层级树状结构展示。安装Element UI后，通过el-tree组件可快速实现多个树状图。

<template>
  <div>
    <el-tree :data="treeData1" :props="defaultProps"></el-tree>
    <el-tree :data="treeData2" :props="defaultProps"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData1: [
        { label: '节点1', children: [{ label: '子节点1' }] }
      ],
      treeData2: [
        { label: '节点A', children: [{ label: '子节点A' }] }
      ],
      defaultProps: { children: 'children', label: 'label' }
    }
  }
}
</script>

自定义递归组件实现

如需更高自由度，可通过递归组件自定义树状结构。创建TreeNode.vue组件处理递归逻辑。

<!-- TreeNode.vue -->
<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      {{ node.label }}
      <TreeNode v-if="node.children" :nodes="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['nodes']
}
</script>

使用第三方库Vue.D3.tree

对于复杂可视化需求，Vue.D3.tree库结合D3.js提供强大的树状图功能。需先安装vue-d3-tree。

<template>
  <div>
    <vue-d3-tree :data="treeData" :options="options"/>
  </div>
</template>

<script>
import VueD3Tree from 'vue-d3-tree'
export default {
  components: { VueD3Tree },
  data() {
    return {
      treeData: { name: 'Root', children: [...] },
      options: { /* 配置项 */ }
    }
  }
}
</script>

动态加载多个树数据

通过API异步加载不同树数据时，使用v-for渲染多个树实例。

<template>
  <div v-for="(tree, index) in treeList" :key="index">
    <el-tree :data="tree.data"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeList: []
    }
  },
  async created() {
    this.treeList = await fetchTrees() // 获取多个树数据
  }
}
</script>