orgchart elementUI

使用 ElementUI 的 OrgChart 组件

ElementUI 本身并未直接提供 OrgChart（组织结构图）组件，但可以通过第三方库或自定义实现类似功能。以下是几种实现方式：

基于 ElementUI Tree 组件扩展

ElementUI 的 el-tree 组件可以模拟简单的组织结构图，通过自定义节点样式和连接线实现层级关系展示：

<el-tree :data="orgData" :props="defaultProps" node-key="id">
  <span slot-scope="{ node, data }" class="custom-node">
    <span>{{ node.label }}</span>
  </span>
</el-tree>

data() {
  return {
    orgData: [{
      id: 1,
      label: 'CEO',
      children: [{
        id: 2,
        label: 'CTO'
      }]
    }],
    defaultProps: {
      children: 'children',
      label: 'label'
    }
  }
}

集成第三方 OrgChart 库

推荐使用 orgchart.js 或 vue-orgchart 等专门库，与 ElementUI 样式兼容：

安装 vue-orgchart：

npm install vue-orgchart

示例代码：

<orgchart :datasource="orgData"></orgchart>

import OrgChart from 'vue-orgchart'
export default {
  components: { OrgChart },
  data() {
    return {
      orgData: {
        name: 'CEO',
        children: [
          { name: 'CTO' },
          { name: 'CFO' }
        ]
      }
    }
  }
}

自定义 SVG 实现

通过 SVG 绘制更灵活的组织结构图：

<svg width="100%" height="300">
  <g v-for="(node, index) in nodes" :key="index">
    <rect :x="node.x" :y="node.y" width="100" height="50" fill="#409EFF"/>
    <text :x="node.x+50" :y="node.y+30" fill="white">{{node.name}}</text>
  </g>
</svg>

样式优化建议

1. 使用 ElementUI 的配色方案（如 #409EFF 作为主色）
2. 为节点添加阴影效果增强层次感：

   .custom-node {
   box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
   }

3. 通过 CSS 动画实现交互效果：

   .node-item {
   transition: transform 0.3s;
   }
   .node-item:hover {
   transform: scale(1.05);
   }

数据格式处理

建议将后端数据转换为以下格式：

{
  id: 1,
  label: 'Root',
  children: [
    { id: 2, label: 'Child' }
  ]
}

以上方案可根据实际需求选择，复杂场景推荐使用专门的组织结构图库，简单层级展示可使用 Tree 组件扩展实现。