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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM