最近公司需要做一个功能,就是做公司的组织架构,网上找了很多,借鉴几位博主的文章加自己的功能写一篇文章把
基于element-ui实现vue-org-tree树状功能
借鉴的博主:
https://www.cnblogs.com/BlueToWhite/p/11431453.html
https://zhuanlan.zhihu.com/p/117300250
安装那边几位博主写的很详细,我就说一下其他的,我现在要在每个子节点下面多一个下拉框显示增加修改删除,所以我用到了有个方法,发现组件提供的API里面有自定义渲染方式的prop:renderContent ,结合elementui的下拉菜单组件开发
官方效果
官方代码
<el-col :span="12">
<span class="demonstration">click 激活</span>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
通过鼠标点击事件实现一个下拉菜单:
<vue2-org-tree :data="treeData" :horizontal="true" :label-class-name="labelClassName" collapsable :render-content="renderContent" @on-expand="onExpandTree" @on-node-click="NodeClick" @on-node-mouseover="onMouseover" @on-node-mouseout="onMouseout" />
renderContent(h, data) { return (<el-dropdown trigger=‘click‘ oncommand={(command) => this.handleAddDel(command)}> <a>{data.label}</a> <el-dropdown-menu slot=‘dropdown‘> <el-dropdown-item command=‘addTreeSel‘>添加部门</el-dropdown-item> <el-dropdown-item command=‘editTreeSel‘>修改部门</el-dropdown-item> <el-dropdown-item command=‘delTreeSel‘ >删除部门</el-dropdown-item > </el-dropdown-menu > </el-dropdown >) },
然后在handleAddDel方法里面根据command的值去操作增删修改
效果图
原文:https://www.cnblogs.com/wmm-txt/p/14293942.html