当前位置：首页 > 前端教程

orgchart elementUI

2026-01-15 19:00:41前端教程

orgchart elementUI

Element UI 本身不提供官方的组织结构图（orgchart）组件，但可以通过第三方库或自定义实现来集成组织结构图功能。以下是几种常见的方法：

使用第三方库 vue-orgchart

vue-orgchart 是一个基于 Vue.js 的组织结构图库，可以与 Element UI 无缝集成。

安装依赖：

npm install vue-orgchart

示例代码：

<template>
  <div>
    <orgchart :datasource="data"></orgchart>
  </div>
</template>

<script>
import OrgChart from 'vue-orgchart';
import 'vue-orgchart/dist/style.min.css';

export default {
  components: { OrgChart },
  data() {
    return {
      data: {
        name: 'CEO',
        title: '首席执行官',
        children: [
          {
            name: 'CTO',
            title: '技术总监',
            children: [
              { name: 'Dev1', title: '开发工程师' },
              { name: 'Dev2', title: '开发工程师' }
            ]
          },
          {
            name: 'CFO',
            title: '财务总监',
            children: [
              { name: 'Accountant', title: '会计师' }
            ]
          }
        ]
      }
    };
  }
};
</script>

自定义实现

如果需求较简单，可以通过 Element UI 的现有组件（如 Tree）模拟组织结构图。

示例代码：

<template>
  <el-tree
    :data="data"
    node-key="id"
    :props="defaultProps"
    :expand-on-click-node="false">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        id: 1,
        label: 'CEO',
        children: [{
          id: 2,
          label: 'CTO',
          children: [
            { id: 3, label: 'Dev1' },
            { id: 4, label: 'Dev2' }
          ]
        }, {
          id: 5,
          label: 'CFO',
          children: [
            { id: 6, label: 'Accountant' }
          ]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>

高级定制

对于复杂需求，可以结合 D3.js 或 ECharts 实现更灵活的组织结构图。例如，使用 ECharts 的桑基图或树图。

安装依赖：

npm install echarts

示例代码：

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

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

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    chart.setOption({
      series: [{
        type: 'tree',
        data: [{
          name: 'CEO',
          children: [
            {
              name: 'CTO',
              children: [
                { name: 'Dev1' },
                { name: 'Dev2' }
              ]
            },
            {
              name: 'CFO',
              children: [
                { name: 'Accountant' }
              ]
            }
          ]
        }],
        symbolSize: 10,
        orient: 'vertical',
        label: {
          position: 'top'
        }
      }]
    });
  }
};
</script>