一篇很详细的思维导图(组织机构树)工具(vue-org-tree)的使用总结
1.业务需求:
- 最近应公司业务需求,需要在vue项目中使用思维导图(组织机构树)功能,用来展示系统产品的质量追溯。然后呢,我就开始收集资料了,后来呢就发现了两款比较好且社区比较活跃的思维导图插件
vue2-org-tree
、v-org-tree
,其实这两款插件无论在使用上还是视图上都大同小异,主要是在一些API上有不同。
2.需求分析:
- 在这里呢我用的是
vue2-org-tree
,在使用上选谁都是可以的。(注意:这两款插件在兼容性方面兼容主流浏览器(edge+firefox+google),在IE8及以下版本样式上会有问题
),下面我整理了一个简单的使用案例,具体业务需求大家可以在这个基础上自行拓展。
3.解决方案:
-
废话不多说,直接进入主题!!!
-
第一步,在项目安装并引入组件: