由于公司业务需求，需要开发一个展示组织架构的树组件（公司的项目是基于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，这样就达到了节点定制的目的！
函数式组件