Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

A journey of a thousand miles begins with single step

background

Recently, the company used tree to display the company structure in the project, but mainly used (Vue + Element), but the tree structure of Element really does not meet the needs, SO I found the main character of this paper on the Internet, vue2-org-tree, the biggest advantage of this plug-in is high customizability. For the late ‘amiable’ party A put forward the demand, can be very good to meet.

The installation

# use npm
npm i vue2-org-tree

# use yarn
yarn add vue2-org-tree

It is recommended to install less-loader to prevent style problems
npm install --save-dev less less-loader
yarn add --save-dev less less-loader
Copy the code

The introduction of

Add it in main.js

import Vue2OrgTree from 'vue2-org-tree'
import 'vue2-org-tree/dist/style.css'

Vue.use(Vue2OrgTree)
Copy the code

use

Create a VUE file in your project and configure routes to facilitate testing

In the template

<vue2-org-tree :data="data"/>
Copy the code

In the data function

Data: {label: 'jiangsu XX', value: '-1', children: [{value:' reqJFxqfzr ', label: 'need room manager ', children: [{label: Value: '1000035939'}, {label: 'Lin Ping ', value: '23000068'}, {label:' Wang Qing 'an ', value: '23000079'}]}, {value: '1000035939'}, {label: 'Wang Qing 'an ', value: '23000079'}]}, {value: 'req_fzr_kf', label: 'development room manager ', children: [{label:' ren Tong ', value: '1000035939'}, {label: 'Lin Ping ', value: '23000068'}, {label: 'req_fzr_dsj', label: 'children ', {label:' children ', {label: 'children ', {label:' children ' Value: '1000035939'}, {label: 'Lin Ping ', value: '23000068'}, {label:' Wang Qing 'an ', value: '23000079'}]}, {value: '1000035939'}, {label: 'Wang Qing 'an ', value: '23000079'}]}, {value: 'req_fzr_BAS ', label:' children ', children: [{label: 'Ren Tong ', value: '1000035939'}, {label:' Lin Ping ', value: '23000068'}, {label: 'reqownerInfo ', label:' children ', {label: 'children ', {label:' reqownerInfo ', label: 'children ', [{label: Value: '1000035939'}, {label: 'Lin Ping ', value: '23000068'}, {label:' Wang Qing 'an ', value: '23000079'}]}, {value: '1000035939'}, {label: 'Wang Qing 'an ', value: '23000079'}]}, {value: 'reqownerinfo-aq', label: 'Head of safe room ', children: [{label:' Ren Tong ', value: '1000035939'}, {label: 'Lin Ping ', value: ' ', {label: ' ', value: ' '}]}]}Copy the code

Results the following

You can set the attribute: Horizontal =”true” to display from left to right

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

We can also dynamically bind custom classes using label-class-name

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

Define the variable labelClassName in the data function

labelClassName:"bg-color-blue".Copy the code

Set the style for.bg-color-blue in styles

You cannot add scoped to the style tag otherwise the custom style will be invalid

.bg-color-blue{
  color: #fff;
  background-color: skyblue;
}
Copy the code

The style looks like this

Collapsable attribute collapsable @on-node-click=”NodeClick” node click attribute, @on-node-mouseover=”onMouseover” mouseover @on-node-mouseout=”onMouseout”