Vue-OrgChart：轻量级组织结构图组件

Vue-OrgChart 是一个基于 Vue.js 开发的轻量级组织结构图组件，它采用嵌套表格的方式来构建树状的组织结构图，提供了一种简单直观的方式来展示公司架构、团队分布等层级关系。

项目特性

• 简洁直观：使用嵌套表格实现树状结构，实现方式简单直接
• 易于使用：提供清晰的API接口和配置选项
• 响应式设计：支持拖拽平移和缩放功能
• 自定义节点：支持通过作用域插槽自定义节点内容
• 静态数据展示：专注于静态组织结构图的展示需求

安装使用

通过npm安装Vue-OrgChart：

npm install vue-organization-chart -S

在Vue项目中引入并使用：

<template>
  <div>
    <organization-chart :datasource="ds"></organization-chart>
  </div>
</template>

<script>
import Vue from 'vue'
import OrganizationChart from 'vue-organization-chart'
import 'vue-organization-chart/dist/orgchart.css'

export default {
  components: {
    OrganizationChart
  },
  data() {
    return {
      ds: {
        'id': '1',
        'name': 'Lao Lao',
        'title': '总经理',
        'children': [
          { 'id': '2', 'name': 'Bo Miao', 'title': '部门经理' },
          { 'id': '3', 'name': 'Su Miao', 'title': '部门经理',
            'children': [
              { 'id': '4', 'name': 'Tie Hua', 'title': '高级工程师' },
              { 'id': '5', 'name': 'Hei Hei', 'title': '高级工程师',
                'children': [
                  { 'id': '6', 'name': 'Pang Pang', 'title': '工程师' },
                  { 'id': '7', 'name': 'Xiang Xiang', 'title': 'UI工程师' }
                ]
              }
            ]
          },
          { 'id': '8', 'name': 'Hong Miao', 'title': '部门经理' },
          { 'id': '9', 'name': 'Chun Miao', 'title': '部门经理' }
        ]
      }
    }
  }
}
</script>

配置属性

Vue-OrgChart 提供了一系列配置属性来满足不同的使用需求：

属性名	类型	必需	默认值	描述
datasource	json	是	-	构建组织结构图的数据源，可以是JSON对象
pan	boolean	否	false	是否允许通过鼠标拖拽平移组织结构图
zoom	boolean	否	false	是否允许通过鼠标滚轮缩放组织结构图
zoomin-limit	number	否	7	设置最大缩放限制
zoomout-limit	number	否	0.5	设置最小缩放限制

事件处理

组件提供了节点点击事件：

<organization-chart 
  :datasource="ds" 
  @node-click="handleNodeClick">
</organization-chart>

自定义节点内容

通过作用域插槽可以自定义节点的内部结构：

<organization-chart :datasource="ds">
  <template slot-scope="{ nodeData }">
    <div class="custom-node">
      <h3>{{ nodeData.name }}</h3>
      <p>{{ nodeData.title }}</p>
      <span class="badge">{{ nodeData.department }}</span>
    </div>
  </template>
</organization-chart>

项目结构

Vue-OrgChart 的项目结构清晰，主要包含以下核心文件：

• src/components/OrganizationChartContainer.vue - 主容器组件
• src/components/OrganizationChartNode.vue - 节点组件
• src/components/index.js - 组件导出文件
• src/App.vue - 示例应用
• src/main.js - 应用入口文件

开发环境搭建

要开始开发或贡献代码，首先克隆项目：

git clone https://gitcode.com/gh_mirrors/vu/vue-orgchart
cd vue-orgchart
npm install

可用的开发命令：

• npm run serve - 启动开发服务器
• npm run build - 构建生产版本
• npm run build-component - 构建组件库
• npm run lint - 代码检查

最佳实践

在实际项目中使用Vue-OrgChart时，建议：

1. 数据格式化：确保数据源格式正确，包含必要的id、name、title字段
2. 性能优化：对于大型组织结构，考虑分页加载或虚拟滚动
3. 样式定制：通过CSS自定义主题颜色和节点样式
4. 事件处理：合理处理节点点击等交互事件
5. 响应式设计：确保在不同屏幕尺寸下都能正常显示

Vue-OrgChart 是一个专注于静态组织结构图展示的轻量级解决方案，非常适合企业管理系统、组织架构展示等场景使用。其简单的API设计和灵活的定制能力使其成为Vue生态中组织结构图组件的一个优秀选择。