一款基于Vue2.0的组织架构树组件，支持节点定制、节点样式定制、支持水平展示
本文首发于掘金：https://juejin.im/post/5a265ed551882531ba10cce8
由于公司业务需求，需要开发一个展示组织架构的树组件（公司的项目是基于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
image.png
-
horizontal
image.png
问题总结
- 可以定义一个树的store，存储每个节点状态，这样就可以在内部维护树节点的展开可收起状态
最后附上源码传送门：https://github.com/hukaibaihu/vue-org-tree !
参考资料
https://github.com/HigorSilvaRosa/vue-org-chart
作者：Cocokai
链接：https://juejin.im/post/5a265ed551882531ba10cce8
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
