How to make an organizational tree component using Vue

Recently, the company is working on a project based on Vue. The project needs to develop a tree component that displays the organizational structure. I searched online for a long time and did not find a suitable one. Below, I will share with you an organizational structure tree component based on Vue. Friends who need it can refer to it

Due to the company's business needs, it is necessary to develop a tree component that displays the organizational structure (the company's project is based on Vue). After searching for a long time on GitHub, there are not many such components, and there are no components that meet business needs, so I decided to build my own wheel!

Analysis

• #Since it is a tree, each node should be the same component

• Nodes are nested under nodes, so the node component should be a recursive component

Then, here comes the problem. How to write recursive components?

Recursive components

Vue official documentation says this:

Components can be called recursively within its template Own. However, this can only be done if it has the name option

Next, let’s write a tree node recursive component:

<template>
 <p class="org-tree-node">
 <p class="org-tree-node-label">{{data.label}}</p>
  <p class="org-tree-node-children" v-if="data.children">
  <org-tree-node v-for="node in data.children" :data="node" :key="data.id"></org-tree-node>
 </p>
 </p>
</template>
<script>
 export default {
 name: &#39;OrgTreeNode&#39;,
 props: {
  data: Object
 }
 }
</script>
<style>
 /* ... */
</style>

Then render this component, the effect is as follows

At this point, a simple organizational structure tree component is completed.

However, things are far from over. . .

Requirements: The label of the node must support customization, and the tree must support horizontal display!

Therefore, we make the following modifications to the recursive component:

<template>
 <p class="org-tree-node">
 <p class="org-tree-node-label">
  <slot>{{data.label}}</slot>
 </p> 
 <p class="org-tree-node-children" v-if="data.children">
  <org-tree-node v-for="node in data.children" :data="node" :key="data.id"></org-tree-node>
 </p>
 </p>
</template>
<script>
 export default {
 name: &#39;OrgTreeNode&#39;,
 props: {
  data: Object
 }
 }
</script>
<style>
 /* ... */
</style>

We use slot slots to support label customization, but the problem comes again: we find that only the first-level node label can Custom, nested child nodes cannot effectively pass slot slots. After searching online for a long time, there was still no result, so I looked at the official documentation. Found a functional component. Since I have used the tree component of element-ui before, I was inspired to think of passing a renderContent function like the tree component of element-ui, and the caller can render the node label by himself, thus achieving the purpose of node customization!

Functional component

Next, we transform the tree node template component into a functional component. Writing node.js:

First we implement a render function

export const render = (h, context) => {
 const {props} = context
 return renderNode(h, props.data, context)
}

Implement the renderNode function

export const renderNode = (h, data, context) => {
 const {props} = context
 const childNodes = []
 childNodes.push(renderLabel(h, data, context))
 if (props.data.children && props.data.children.length) {
 childNodes.push(renderChildren(h, props.data.children, context))
 }
 return h('p', {
 domProps: {
 className: 'org-tree-node'
 }
 }, childNodes)
}

Implement the renderLabel function. The key to node label customization is here:

export const renderLabel = (h, data, context) => {
 const {props} = context
 const renderContent = props.renderContent
 const childNodes = []
 // 节点label定制，由调用者传入的renderContent实现
 if (typeof renderContent === 'function') {
 let vnode = renderContent(h, props.data)
 vnode && childNodes.push(vnode)
 } else {
 childNodes.push(props.data.label)
 }
 return h('p', {
 domProps: {
 className: 'org-tree-node-label'
 }
 }, childNodes)
}

Implement the renderChildren function. Here renderNode is called recursively, and the recursive component is implemented.

export const renderChildren = (h, list, context) => {
 if (Array.isArray(list) && list.length) {
 const children = list.map(item => {
 return renderNode(h, item, context)
 })
 return h('p', {
 domProps: {
 className: 'org-tree-node-children'
 }
 }, children)
 }
 return ''
}

At this point, our render function is completed. Next, use the render function to define functional components. Declare in the tree component:

<template>
 <!-- ... -->
</template>
<script>
 import render from &#39;./node.js&#39;
 export default {
 name: &#39;OrgTree&#39;,
 components: {
  OrgTreeNode: {
  render,
  // 定义函数式组件
  functional: true
  }
 }
 }
</script>

At this point, our functional component transformation is completed. As for the horizontal display, we can use style control.

CSS Styles

Styles are precompiled using less. The lines between nodes are drawn using the border of :before and :after pseudo-elements

Function extension

• Add Added labelClassName attribute to support style customization of node labels

• Added labelWidth attribute to limit the width of node labels

• Added props attribute, refer to the props attribute of the tree component of element-ui to support complex data structures

• Added the collapsable attribute to support the expansion and collapse of child nodes (expand and collapse operations Needs to be implemented by the caller)

• At first, the flex layout was used, but it needed to be compatible with IE9, and later changed to display: table layout

Finally Effect:

default

##horizontal

##Problem SummaryYou can define a tree store to store the status of each node, so that the expanded and collapsed status of the tree nodes can be maintained internally

The above is what I compiled for everyone. , I hope it will be helpful to everyone in the future.

Related articles:

How to implement a series of functions such as image uploading in the WeChat applet

About null values ​​and The statement of false value

About automated construction in Webpack (detailed tutorial)

BUG encountered in JavaScript

The above is the detailed content of How to make an organizational tree component using Vue. For more information, please follow other related articles on the PHP Chinese website!