詳解樹狀結構圖 vue-org-tree

最近公司項目（Vue + Element ）需求有用到 tree ，所以呢我去網上找了很多插件，都不是很符合我的要求。最后在GitHub上面找到了一款插件是 iview 的組織結構樹  vue-org-tree ,但是由於文檔不是特別易懂，自己踩了很多坑。不過定制性特別高，基本上會用到的方法都有了。所以今天來給大家講解下。

 npm

# use npm
npm install vue-tree-color

安裝 loader

溫馨提示：不安裝less-loader基本上都會報錯

npm install --save-dev less less-loader

Import Plugins

import Vue from 'vue'
import Vue2OrgTree from 'vue-tree-color'

Vue.use(Vue2OrgTree)

簡單起步

老嚴這邊呢，就直接使用Vue-cli起步了，vue-org-tree 安裝成功之后，我們就直接使用了，在Vue頁面或者組件中使用vue2-org-tree 標簽，動態綁定data

基本創建

<vue2-org-tree :data="data"/>

data數據放入頁面中

id 每個元素不同的ID ，label為name， children為自己的子集數據

data: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "產品研發部",
            children: [
              {
                id: 5,
                label: "研發-前端"
              },
              {
                id: 6,
                label: "研發-后端"
              },
              {
                id: 9,
                label: "UI設計"
              },
              {
                id: 10,
                label: "產品經理"
              }
            ]
          },
          {
            id: 3,
            label: "銷售部",
            children: [
              {
                id: 7,
                label: "銷售一部"
              },
              {
                id: 8,
                label: "銷售二部"
              }
            ]
          },
          {
            id: 4,
            label: "財務部"
          },
          {
            id: 9,
            label: "HR人事"
          }
        ]
      }

 

效果圖：

排列方式

剛剛我們看到的是默認排列方式 ，其實還有一種排列方式，我們一起來看看

水平排列

horizontal 是水平排列方式，我們來實踐一下吧，它的參數是true、false

<vue2-org-tree
    :data="data"
    :horizontal="true"
/>

看看效果如何：

 

修改背景色

​ 使用 label-class-name 我們還可以動態綁定自定義class

<vue2-org-tree 
    :data="data" 
    :horizontal="true"      
    :label-class-name="labelClassName"           
/>

我們一起來嘗試一下吧！

js:

 data() {
    return {
	labelClassName:"bg-color-orange"
    }
 }

css:

.bg-color-orange{
    color: #fff;
    background-color: orange;
}

警告⚠ ：style標簽里不能加 scoped 不然自定義樣式無效

看看效果圖

 

折疊展示

折疊展示效果

<vue2-org-tree 
	:data="data" 
    :horizontal="true"      
    :label-class-name="labelClassName"    
    collapsable
/>

　　

 

 

 折疊效果是有了，那么怎么展開呢？

<vue2-org-tree 
    :data="data" 
    :horizontal="true"      
    :label-class-name="labelClassName"    
    collapsable
    @on-expand="onExpand"
/>

js:

collapse(list) {
   	var _this = this;
    list.forEach(function(child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
	});
},
onExpand(e,data) {
    if ("expand" in data) {
       data.expand = !data.expand;
    	if (!data.expand && data.children) {
       		this.collapse(data.children);
    	}
    } else {
        this.$set(data, "expand", true);
    }
},

請看效果圖：

 

問題又來了，默認展開如何實現？

請看大屏幕

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);
        }
    }
}

在請求完數據之后直接調用,或者生命周期調用，可以自由發揮

第一個參數是你的資源data，第二個參數是全部展開或否

this.toggleExpand(this.data,true)

　　

 

深入觀察

 vue2-org-tree 向我們拋出了幾個事件，我們先看看有哪些事件

點擊事件

on-node-click 就是被拋出的點擊事件

<vue2-org-tree 
	:data="data" 
	@on-node-click="NodeClick"
/>

我們在方法里面寫一個NodeClick用來接受點擊觸發的值

NodeClick(e,data){
	console.log(e)
    // e 為 event
	console.log(data)
    // 當前項的所有詳情 如：id label children
}

打印結果：

// e 的打印
{
    isTrusted: true
    screenX: 720
    screenY: 308
    clientX: 720
    clientY: 205
    ctrlKey: false
    shiftKey: false
    altKey: false
    metaKey: false
    button: 0
    buttons: 0
    relatedTarget: null
    pageX: 720
    ......
}
// data的打印
{
    id: 2
    label: "產品研發部"
    children: Array(4)
}

移入移出

它還向我們拋出了移入移出事件，返回值與點擊事件大致相同

<vue2-org-tree
    :data="data"
    :horizontal="true"
    :label-class-name="labelClassName"
    collapsable
    @on-expand="onExpand"
    @on-node-mouseover="onMouseover"
    @on-node-mouseout="onMouseout"
/>

拓展移入移出

來了老弟？我們做移入移出，肯定是要有功能的對不對？

每當我們的鼠標移入到小盒子里就出現一個模態框用來展示data內容

<vue2-org-tree 
    :data="data" 
    :horizontal="true"  
    name="test"    
    :label-class-name="labelClassName"
    collapsable
    @on-expand="onExpand"
    @on-node-mouseover="onMouseover"
    @on-node-mouseout="onMouseout"
/>
<!-- 創建浮窗盒子 -->
<div v-show="BasicSwich" class="floating">
    <p>ID:{{BasicInfo.id}}</p>
    <p>Name:{{BasicInfo.label}}</p>
</div>

 

 js:

// 聲明變量
data() {
    return {
	BasicSwich:false,
	BasicInfo:{id:null,label:null}
    }
}
// 方法
onMouseout(e, data) {
    this.BasicSwich = false
},
onMouseover(e, data) {
    this.BasicInfo = data;
    this.BasicSwich = true;
    var floating =  document.getElementsByClassName('floating')[0];
    floating.style.left = e.clientX +'px';
    floating.style.top = e.clientY+'px';
},

css:

/* 盒子css */
.floating{
    background: rgba(0, 0, 0, 0.7);
    width: 160px;
    height: 100px;
    position: absolute;
    color: #fff;
    padding-top: 15px;
    border-radius: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    left:0;
    top: 0;
    transition: all 0.3s;
    z-index: 999;
    text-align: left;
    font-size: 12px;
}

上效果圖：

 

 API

on-expand

鼠標點擊時調用它。

• params e Event
• params data Current node data

on-node-click

well be called when the node-label clicked

• params e Event
• params data Current node data

on-node-mouseover

當鼠標懸停時調用它。

• params e Event
• params data Current node data

on-node-mouseout

當鼠標離開時調用它。

• params e Event
• params data Current node data

  

最后附上Git地址：https://github.com/CrazyMrYan/vue2-org-tree

預覽地址：http://crazy.lovemysoul.vip/gitdemo/vue2-org-tree

 

關注“悲傷日記”更多精彩文章