好用的基于vue的组织架构图组件_vue-okr-tree

都是基于vue的组织架构图，有支持vue2.x和vue3.x,可自行选择使用

一、vue-okr-tree（支持vue2）

文档地址：vue2-okr-tree
这个文档里面只有使用方法，不像vue3-tree-org里面有详细的介绍和安装引入教程

1.安装与引入

npm install --save-dev vue-okr-tree 
1

import { VueOkrTree } from "vue-okr-tree";
import "vue-okr-tree/dist/vue-okr-tree.css";
Vue.component('vue-okr-tree', VueOkrTree) //全局注册组件，也可局部使用注册
1
2
3

2.使用

//注意：data接收的是个array数组
 <vue-okr-tree :data="testData1" />
1
2

其它的属性方法可参考文档（在上面）

二、vue2-org-tree (支持vue2)

(偶然间发现了这个跟上面那个类似的组件，但是区别没有搞太懂)

1.安装与引入

 npm install --save-dev vue2-org-tree
1

import Vue2OrgTree from 'vue2-org-tree';
import "vue2-org-tree/dist/style.css";
Vue.use(Vue2OrgTree)
1
2
3

2.使用

注意：data接收的是个object对象
<vue2-org-tree :data="testData2" />
1
2

三、结果

先暂时记录一下开始的使用疑惑，后续会将自己的需求和实现补充完的

四、区别

1. vue-okr-tree有个文档 虽然跟vue2-org-tree是通用的
2. vue-okr-tree接收的是个array数组，vue2-org-tree接收的是个object对象

五、zm-tree-org （支持vue2）

组件依赖于vue-org-tree， 在此基础上将部分源代码进行优化修改。增加鼠标拖拽和鼠标滚轮缩放，并支持节点拖拽，以及节点编辑等功能。

链接文档（https://sangtian152.gitee.io/zm-tree-org/#/guide），里面有详细的安装引入和使用

六、vue3-tree-org (支持vue3)

链接文档（https://sangtian152.github.io/vue3-tree-org/guide/），里面有详细的安装引入和使用