接下来，我们将树节点模板组件改造成函数式组件。编写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 布局