最近公司图层管理系统需要一个组织结构图的功能，之前没有做过类似的功能,本着不懂就要问的精神,然后就去问度娘,搜到了vue-org-tree这个插件,还有很多大佬实现的案例，效果很好,话不多说搞起来。
需求
以组织结构图的形式展示部门层级结构,支持节点的增删改查操作。
开始开发
1.安装vue-org-tree npm包
2.在项目里引入
在项目main.js里引入vue-org-tree
1.用git克隆gh-pages分支下的demo文件
运行demo以后发现基本的结构正常加载出来了,但是不支持节点增删改查,然后样式和我们ui样式也不一样,所以我们要在插件的基础上进行扩展。
4.扩展组件,修改组件样式
1.分析组件 组件节点都是动态生成的,样式都是组件默认的样式，所以我们要从源头出发,查看源码文件,看下节点都是怎么生成的。
源码文件目录
打开org-tree.vue文件
发现代码里没有节点dom结构,那么节点是怎么生成的呢?
模板里没节点,那我们就看js,在反复看了几遍js块后,看见js块里引入了一个render,并在components里进行了引用,发现这个怎么和自己平常写的components怎么不一样,
平时的模板注册
不懂就问,百度一下，你就知道.果然强大的度娘让我找到了答案
文章地址 cn.vuejs.org/v2/guide/re…
原来是个函数式组件,那么这个引入的一定是个函数了,编辑器全局搜render ,在src文件夹下有个node.js文件打开文件可以发现暴露了一个render函数
仔细看了一下文件后发现组件的节点dom结构就是在这里进行创建的
主要就是这几个函数
我们主要看renderlabel 这个函数
我们可以很清楚的看到label节点就是在这个函数里动态创建的,如果我们要自定义节点的样式和结构,那就要从这里入手,因为组件是封装的函数进行创建节点的,那我们如果要想在组件上扩展增删改查功能,添加事件就不太好处理,所以我决定不在这个js里进行修改。不懂就问,百度一下。然后我就搜到一个大佬写的文章。文章里说 发现组件提供的API里面有自定义渲染方式的prop：renderContent 我们可以传一个jsx 进行渲染。
文章地址 www.cnblogs.com/BlueToWhite…
找到我们自己的组件,自定义一个renderContent函数绑定到组件render-content方法上.
函数return的模板就是你要自定义的label节点dom结构.
最后完成的效果,增删改查也都实现了
问题
1.ie兼容问题,因为组件js部分都是用es6语法编写,所以在ie上会报语法错误,我是本地运行babel手动把组件js 进行了es5转换,然后把node包里的组件js进行替换，重新启动项目,组件就可以正常加载了。
2.jsx模板 绑定属性,方法,与template模板语法有差别,百度一下解决了
最后
本人前端小白一个，第一次发帖,心情有些激动,文笔不太好,大佬们凑合着看,文章里如果有说的不太对的地方,欢迎各位大佬指教,最后祝大家新年快乐。
