快捷導(dǎo)航

Vue之vue-tree-color組件實(shí)現(xiàn)組織架構(gòu)圖案例詳解

更新時(shí)間：2021年09月09日 09:22:51 作者：梁月月_

這篇文章主要介紹了Vue之vue-tree-color組件實(shí)現(xiàn)組織架構(gòu)圖案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

npm

# use npm
npm install vue-tree-color

安裝loader

npm install --save-dev less less-loader

Import Plugins

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

開(kāi)始

因?yàn)橐呀?jīng)安裝過(guò)了組件，所以可以直接使用，在vue頁(yè)面中，直接使用組件標(biāo)簽，動(dòng)態(tài)綁定data數(shù)據(jù)（data數(shù)據(jù)為遞歸數(shù)據(jù)即可）

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

data數(shù)據(jù)放入頁(yè)面中

其中，data數(shù)據(jù)中，id 每個(gè)元素不同的ID ，label為name， children為自己的子集數(shù)據(jù)

排列方式

剛才我們看到是默認(rèn)排列方式，其實(shí)還有一種水平排列方式

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

效果如下

折疊展示

添加一個(gè)屬性 collapsable

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

怎么展開(kāi)呢，需要加一個(gè)組件自帶方法

on-expand

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

js部分

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

效果如下

點(diǎn)擊節(jié)點(diǎn)

添加一個(gè)方法 on-node-click

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

js

onNodeHandle(e, data) {
    // e是節(jié)點(diǎn)數(shù)據(jù)
    console.log(e)
    // data是渲染在節(jié)點(diǎn)上的數(shù)據(jù)
    console.log(data)
},

打印結(jié)果

其他功能

組件還提供了其他功能，大概比較常用的還有，設(shè)置節(jié)點(diǎn) 顏色，移入移出功能，等等，我把github地址粘貼進(jìn)來(lái)，有興趣的可以自己了解

點(diǎn)擊下方鏈基即可查看組件更多功能

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

到此這篇關(guān)于Vue之vue-tree-color組件實(shí)現(xiàn)組織架構(gòu)圖案例詳解的文章就介紹到這了,更多相關(guān)Vue之vue-tree-color組件實(shí)現(xiàn)組織架構(gòu)圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: