【亲测免费】 Vue Organization Chart 技术文档

1. 安装指南

1.1 安装环境要求

• Node.js 环境
• Vue.js 项目

1.2 安装步骤

在项目根目录下运行以下命令来安装 vue-organization-chart：

npm install vue-organization-chart -S

2. 项目使用说明

2.1 引入组件

在 main.js 中引入 vue-organization-chart 组件及其样式：

import Vue from 'vue';
import OrganizationChart from 'vue-organization-chart';
import 'vue-organization-chart/dist/orgchart.css';

Vue.component('organization-chart', OrganizationChart);

2.2 使用组件

在 Vue 组件中使用 organization-chart 组件，并传入 datasource 数据源：

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

<script>
export default {
  data () {
    return {
      ds: {
        'id': '1',
        'name': 'Lao Lao',
        'title': 'general manager',
        'children': [
          { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
          { 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
            'children': [
              { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
              { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
                'children': [
                  { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
                  { 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
                ]
              }
            ]
          },
          { 'id': '8', 'name': 'Hong Miao', 'title': 'department manager' },
          { 'id': '9', 'name': 'Chun Miao', 'title': 'department manager' }
        ]
      }
    }
  }
}
</script>

3. 项目API使用文档

3.1 属性 (Attributes)

名称	类型	是否必填	默认值	描述
datasource	json	是		用于构建组织结构图的数据源，可以是一个 JSON 对象。
pan	boolean	否	false	启用后，用户可以通过鼠标拖放来平移组织结构图。
zoom	boolean	否	false	启用后，用户可以通过鼠标滚轮来缩放组织结构图。
zoomin-limit	number	否	7	用户可以设置的最大放大倍数。
zoomout-limit	number	否	0.5	用户可以设置的最大缩小倍数。

3.2 事件 (Events)

名称	参数	描述
node-click	node data	当用户点击节点时触发。

3.3 作用域插槽 (Scoped Slots)

<template slot-scope="{ nodeData }">
  <!-- 可以自由定制节点的内部结构 -->
</template>

4. 项目安装方式

4.1 通过 npm 安装

在项目根目录下运行以下命令来安装 vue-organization-chart：

npm install vue-organization-chart -S

4.2 引入项目

在 main.js 中引入 vue-organization-chart 组件及其样式：

import Vue from 'vue';
import OrganizationChart from 'vue-organization-chart';
import 'vue-organization-chart/dist/orgchart.css';

Vue.component('organization-chart', OrganizationChart);

通过以上步骤，您可以成功安装并使用 vue-organization-chart 组件来构建组织结构图。