树状结构图 vue-org-tree详解及增删

最近公司需要做一个功能,就是做公司的组织架构,网上找了很多,借鉴几位博主的文章加自己的功能写一篇文章把
基于element-ui实现vue-org-tree树状功能

借鉴的博主详解树状结构图 vue-org-tree - 疯狂的严先生 - 博客园
vue2-org-tree 基于VUE的部门组织架构组件,增删节点实现 - blueToWhite - 博客园


树状图

安装那边几位博主写的很详细,我就说一下其他的,我现在要在每个子节点下面多一个下拉框显示增加修改删除,所以我用到了有个方法,发现组件提供的API里面有自定义渲染方式的prop:renderContent ,结合elementui的下拉菜单组件开发


组件效果

官方代码:

官方代码 

通过鼠标点击事件实现一个下拉菜单:

renderContent(h, data) {
   return (<el-dropdown trigger='click' oncommand=       {(command) => this.handleAddDel(command)}>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容