当前位置：首页 > VUE

vue实现上下级图

2026-01-12 05:50:45VUE

Vue 实现上下级图

在 Vue 中实现上下级图（如组织结构图、树状图等），通常需要使用树形结构数据，并通过递归组件或第三方库（如 D3.js、ECharts 等）渲染。以下是几种常见实现方式：

使用递归组件实现树状图

递归组件是 Vue 中实现树形结构的经典方式，适合简单的上下级关系展示。

<template>
  <div class="tree">
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: {
        name: "Root",
        children: [
          { name: "Child 1", children: [] },
          { name: "Child 2", children: [
            { name: "Grandchild", children: [] }
          ]}
        ]
      }
    };
  }
};
</script>

<!-- TreeNode.vue -->
<template>
  <div>
    <div>{{ node.name }}</div>
    <div v-if="node.children.length" class="children">
      <tree-node
        v-for="child in node.children"
        :key="child.name"
        :node="child"
      ></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: "TreeNode",
  props: ["node"]
};
</script>

使用第三方库（D3.js）

D3.js 适合复杂交互的层级图，需结合 Vue 的生命周期管理 DOM。

<template>
  <div ref="chartContainer"></div>
</template>

<script>
import * as d3 from "d3";

export default {
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const data = {
        name: "Root",
        children: [
          { name: "Child A", value: 10 },
          { name: "Child B", value: 20 }
        ]
      };

      const width = 600;
      const hierarchy = d3.hierarchy(data);
      const treeLayout = d3.tree().size([width, 200]);

      treeLayout(hierarchy);
      const svg = d3.select(this.$refs.chartContainer)
        .append("svg")
        .attr("width", width)
        .attr("height", 300);

      // 绘制节点和连线
      svg.selectAll(".link")
        .data(hierarchy.links())
        .enter()
        .append("path")
        .attr("class", "link")
        .attr("d", d3.linkHorizontal()
          .x(d => d.y)
          .y(d => d.x));

      const node = svg.selectAll(".node")
        .data(hierarchy.descendants())
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", d => `translate(${d.y},${d.x})`);

      node.append("circle").attr("r", 5);
      node.append("text").text(d => d.data.name);
    }
  }
};
</script>

使用 ECharts 实现组织架构图

ECharts 提供开箱即用的树图配置，适合快速实现。

<template>
  <div ref="echartsContainer" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    const chart = echarts.init(this.$refs.echartsContainer);
    const option = {
      series: [{
        type: "tree",
        data: [{
          name: "CEO",
          children: [
            { name: "CTO", children: [{ name: "Dev Team" }] },
            { name: "CFO" }
          ]
        }],
        symbolSize: 10,
        label: { position: "left" }
      }]
    };
    chart.setOption(option);
  }
};
</script>

使用 Vue Tree Component 库

若需快速实现，可直接使用现成组件库如 vue-org-tree。

安装依赖：
```
npm install vue-org-tree
```

使用示例：


<template>
<org-tree :data="treeData" :horizontal="true"></org-tree>
</template>

import OrgTree from "vue-org-tree";

export default { components: { OrgTree }, data() { return { treeData: { label: "Root", children: [ { label: "Department A", children: [{ label: "Team 1" }] }, { label: "Department B" } ] } }; } };

```