基于Vue的组织架构树组件

14,286

由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于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-uitree组件,受到启发,就想到了可以像element-uitree组件一样传一个renderContent函数,由调用者自己渲染节点label,这样就达到了节点定制的目的!

函数式组件

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

  1. 首先我们实现一个render函数

    export const render = (h, context) => {
      const {props} = context
      return renderNode(h, props.data, context)
    }
    
  2. 实现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)
    }
    
  3. 实现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)
    }
    
  4. 实现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-uitree组件的props属性,以支持复杂的数据结构
  • 添加了 collapsable 属性,以支持子节点的展开和折叠(展开和折叠操作需调用者实现)

刚开始采用了flex布局,但是要兼容IE9,后来改成了display: table布局

最终效果

  • default

  • horizontal

问题总结

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

最后附上源码传送门:github.com/hukaibaihu/… !

参考资料

github.com/HigorSilvaR…