基于Vue制作组织架构树组件

由于公司业务需求，需要开发一个展示组织架构的树组件（公司的项目是基于vue）。在github上找了半天，这类组件不多，也没有符合业务需求的组件，所以决定自己造*！

分析

• 既然是树，那么每个节点都应该是相同的组件
• 节点下面套节点，所以节点组件应该是一个 递归组件
  

那么，问题来了。递归组件怎么写？

递归组件

vue官方文档是这样说的：

组件在它的模板内可以递归地调用自己。不过，只有当它有 name 选项时才可以这么做

接下来，我们来写一个树节点递归组件：

<template>
 <div class="org-tree-node">
 <div class="org-tree-node-label">{{data.label}}</div>
  <div 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>
 </div>
 </div>
</template>
<script>
 export default {
 name: 'orgtreenode',
 props: {
  data: object
 }
 }
</script>
<style>
 /* ... */
</style>

然后渲染这个这个组件，效果如下

 

至此，一个简单的组织架构树组件就完成了。

然而，事情还远远没有结束。。。

需求说：节点的label要支持定制，树要支持水平展示！

因此，我们对递归组件作如下修改：

<template>
 <div class="org-tree-node">
 <div class="org-tree-node-label">
  <slot>{{data.label}}</slot>
 </div> 
 <div 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>
 </div>
 </div>
</template>
<script>
 export default {
 name: 'orgtreenode',
 props: {
  data: object
 }
 }
</script>
<style>
 /* ... */
</style>

我们使用slot插槽来支持label可定制，但是问题又来了：我们发现只有第一层级的节点label能定制，嵌套的子节点不能有效的传递slot插槽。上网查了半天，仍然没有结果，于是再看官方文档。发现有个函数式组件。由于之前使用过 element-ui 的 tree 组件，受到启发，就想到了可以像 element-ui 的 tree 组件一样传一个 rendercontent 函数，由调用者自己渲染节点label，这样就达到了节点定制的目的！

函数式组件

接下来，我们将树节点模板组件改造成函数式组件。编写node.js：

首先我们实现一个render函数

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

实现rendernode函数

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('div', {
 domprops: {
 classname: 'org-tree-node'
 }
 }, childnodes)
}

实现renderlabel函数。节点label定制关键在这里：

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('div', {
 domprops: {
 classname: 'org-tree-node-label'
 }
 }, childnodes)
}

实现renderchildren函数。这里递归调用rendernode，实现了递归组件

export const renderchildren = (h, list, context) => {
 if (array.isarray(list) && list.length) {
 const children = list.map(item => {
 return rendernode(h, item, context)
 })
 return h('div', {
 domprops: {
 classname: 'org-tree-node-children'
 }
 }, children)
 }
 return ''
}

至此我们的render函数完成了，接下来使用render函数定义函数式组件。在tree组件里面声明：

<template>
 <!-- ... -->
</template>
<script>
 import render from './node.js'
 export default {
 name: 'orgtree',
 components: {
  orgtreenode: {
  render,
  // 定义函数式组件
  functional: true
  }
 }
 }
</script>

至此我们的函数式组件改造完成了，至于水平显示用样式控制就可以了。

css样式

样式使用less预编译。节点之间的线条采用了 :before 、 :after 伪元素的 border 绘制

功能扩展

• 添加了 labelclassname 属性，以支持对节点label的样式定制
• 添加了 labelwidth 属性，用于限制节点label的宽度
• 添加了 props 属性，参考 element-ui 的 tree 组件的props属性，以支持复杂的数据结构
• 添加了 collapsable 属性，以支持子节点的展开和折叠（展开和折叠操作需调用者实现）
• 刚开始采用了 flex 布局，但是要兼容ie9，后来改成了 display: table 布局

最终效果：

default

horizontal

问题总结

可以定义一个树的store，存储每个节点状态，这样就可以在内部维护树节点的展开可收起状态

总结

以上所述是小编给大家介绍的基于vue制作组织架构树组件的全部内容，希望对大家有所帮助