目錄

• npm
• 安裝loader
• Import Plugins
• 開始
• 排列方式
• 摺疊展示
• 點選節點
• 其他功能

npm

# use npm
npm install -tree-color

安裝loader

npm install --save-dev less less-loader

Import Plugins

import Vue from 'vue'
import Vue2OrghHfXccyWMZTree from 'vue-tree-color'
 
Vue.use(Vue2OrgTree)

開始

因為已經安裝過了元件，所以可以直接使用，在vue頁面中，直接使用元件標籤，動態繫結data資料（data資料為遞迴資料即可）

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

data資料放入頁面中

其中，data資料中，id 每個元素不同的ID ，label為name， children為自己的子集資料

排列方式

剛才我們看到是預設排列方式，其實還有一種水平排列方式

# 只需要加上 horizontal 即可
<vue2-org-tree :data="data" :horizontal="true" />

效果如下 

摺疊展示

新增一個屬性 collapsable

<vue2-org-tree :data="data" :horizontal="true" collapsable http://www.cppcns.com
 
/>

怎麼展開呢，需要加一個元件自帶方法

 on-expand

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

部分

methods: {
    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) {
   hHfXccyWMZ
 
             this.collapse(data.children)
            }
        } else {
            this.$set(data,'expand',true)
        }
    }
}

效果如下

點選節點

新增一個方法 on-node-click

<vue2-org-tree :data="data" :horizontal="true" collapsable @on-expand="onExpand" @on-node-click="onNodeHandle" />

 js

onNodeHandle(e,data) {
    // e是節點資料
    console.log(e)
    // data是渲染在節點上的資料
    console.log(data)
},

列印結果

其他功能

元件還提供了其他功能，大概比較常用的還有，設定 節點 顏色 ，移入移出功能，等等，我把github地址貼上進來，有興趣的可以自己瞭解

點選下方鏈基即可檢視元件更多功能

https://.com/hukaibaihu/vue-org-tree#readme

到此這篇關於Vue之vue-tree-color元件實現組織架構圖案例詳解的文章就介紹到這了,更多相關Vue之vue-tree-color元件www.cppcns.com實現組織架構圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！