Detailed explanation of the organizational structure diagram case of Vue's vue-tree-color component

npm

# use npm
npm install vue-tree-color

Install the loader

npm install --save-dev less less-loader

Import Plugins

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

start

Because the component has been installed, you can use it directly. In the Vue page, directly use the component tag to dynamically bind the data (the data can be recursive data)

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

Data is placed in the page

In the data data, id is a different ID for each element, label is name, and children is its own subset data.

Arrangement

Just now we saw the default arrangement, but there is also a horizontal arrangement.

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

The effect is as follows

Folding display

Add a property collapsable

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

How to expand it? You need to add a component with its own method

on-expand

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

js part

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

The effect is as follows

Click on the node

Add a method on-node-click

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

js

onNodeHandle(e, data) {
    // e is the node data console.log(e)
    // data is the data rendered on the node console.log(data)
},

Printing Results

Other Features

The component also provides other functions, probably the more commonly used ones are setting node color, moving in and out, etc. I paste the github address in, and those who are interested can learn about it themselves

Click on the link below to view more functions of the component

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

This is the end of this article about the detailed explanation of the case of implementing the organizational structure chart of Vue's vue-tree-color component. For more relevant content about implementing the organizational structure chart of Vue's vue-tree-color component, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!