首页 > 其他 > 详细

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

时间:2021-01-18 20:00:01      阅读:4      评论:0      收藏:0      [点我收藏+]

最近公司需要做一个功能,就是做公司的组织架构,网上找了很多,借鉴几位博主的文章加自己的功能写一篇文章把
基于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>
View Code

 

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

  <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的值去操作增删修改

效果图

技术分享图片

 

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

原文:https://www.cnblogs.com/wmm-txt/p/14293942.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号