vue-org-tree 组织结构树插件

需求:组织机构树展示带有单击弹框,勾选单选框后点击按钮进行编辑、删除等操作
效果如下:

Ⅰ.安装:(没有less安装less)
npm install less-loader less
npm install vue2-org-tree
Ⅱ.在main.js引入注册
import Vue2OrgTree from 'vue2-org-tree';
Vue.use(Vue2OrgTree)

          <el-radio-group v-model="radio" id="orgtree" @change="radiohandler" >
             <!-- 收缩属性 :collapsable=true -->
              <vue2-org-tree
                name="orgtree"
                :data="orgtree" //这里的data是一个object
                :horizontal="true"
                :render-content="renderContent"
                @on-expand="onExpand"
                @on-node-click="onNodeClick"
              />
          </el-radio-group>
     getorganizationTreeNumber(){
        post("url").then(res=>{
          this.orgtree=res.data.data[0]
        })
      },
    renderContent(h, data) {
      let that=this
      //因为需要单击树节点和勾选单选框,需要用jsx语法实现在树节点中嵌套 按钮 和 单选框
      let str=<div style="position:relative"><el-radio style="margin-right:0" label={data.id}>&nbsp;</el-radio><el-button class="clickbutton" value={data.id}>        {data.name}</el-button></div>
    //执行方法默认展开所有节点
      this.toggleExpand(this.data,this.expandAll)
    //为按钮绑定事件之前需要解绑之前的时间,否则会绑定很多个相同事件
      $(".clickbutton").unbind('click')
      $(".clickbutton").on('click', function () {
        that.orgid=$(this).attr("value")
         //弹出弹框
        that.dialogVisible=true
      })

      return str
    },
     onExpand(e, data) {
     console.log(data ,"ddddddddddddddddd")
      if ("expand" in data) {
        data.expand = !data.expand;
        this.toggleExpand(data,data.expand)
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    onNodeClick(e, data) {
        if(e.target.className==""){
        this.detailorgId=e.target.parentElement.value
        this.dialogVisible=true
        this.getuser()
      }
    },
    collapse(list) {
      var _this = this;
      list.forEach(function(child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function(item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children,val);
          }
        });
      } else {
        this.$set(data,"expand",val);
        // if (data.children) {
        //   _this.toggleExpand(data.children, val);
        // }
      }
    }
  }
// 组织结构图end

ie11浏览器可能会进不去项目(报错 SCRIPT1002: 语法错误),原因babel转码未转好。
硬核解决办法:
将图中两个文件直接转为ES5(实测有效,是否有缺陷还未知)

另附github源码地址:https://github.com/hukaibaihu/vue-org-tree

posted @ 2020-03-20 15:10  Edith6  阅读(2310)  评论(0编辑  收藏  举报