基于Vue制作组织架构树组件
前端之家收集整理的这篇文章主要介绍了
基于Vue制作组织架构树组件，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<p style="text-align: center">
由于公司业务需求，需要开发一个展示组织架构的树组件（公司的项目是基于Vue）。在GitHub上找了半天，这类组件不多，也没有符合业务需求的组件，所以决定自己造轮子！
分析
- 既然是树，那么每个节点都应该是相同的组件
- 节点下面套节点，所以节点组件应该是一个 递归组件
那么，问题来了。递归组件怎么写？
递归组件
是这样说的：
组件在它的模板内可以递归地调用自己。不过，只有当它有 name 选项时才可以这么做
接下来，我们来写一个树节点递归组件：
然后渲染这个这个组件，效果如下
至此，一个简单的组织架构树组件就完成了。
然而，事情还远远没有结束。。。
需求说：节点的label要支持定制，树要支持水平展示！
因此，我们对递归组件作如下修改：
我们使用slot插槽来支持label可定制，但是问题又来了：我们发现只有第一层级的节点label能定制，嵌套的子节点不能有效的传递slot插槽。上网查了半天，仍然没有结果，于是再看官方文档。发现有个函数式组件。由于之前使用过 element-ui 的 tree 组件，受到启发，就想到了可以像 element-ui 的 tree 组件一样传一个 renderContent 函数，由调用者自己渲染节点label，这样就达到了节点定制的目的！
接下来，我们将树节点模板组件改造成函数式组件。编写node.js：
首先我们实现一个render函数
{
const {props} = context
return renderNode(h,props.data,context)
}
实现renderNode函数
{
const {props} = context
const childNodes = []
childNodes.push(renderLabel(h,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定制关键在这里：
{
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，实现了递归组件
{
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组件里面声明：
至此我们的函数式组件改造完成了，至于水平显示用样式控制就可以了。
CSS样式
样式使用less预编译。节点之间的线条采用了 :before 、 :after 伪元素的 border 绘制
- 添加了 labelClassName 属性，以支持对节点label的样式定制
- 添加了 labelWidth 属性，用于限制节点label的宽度
- 添加了 props 属性，参考 element-ui 的 tree 组件的props属性，以支持复杂的数据结构
- 添加了 collapsable 属性，以支持子节点的展开和折叠（展开和折叠操作需调用者实现）
- 刚开始采用了 flex 布局，但是要兼容IE9，后来改成了 display: table 布局
最终效果：
default
horizontal
问题总结
可以定义一个树的store，存储每个节点状态，这样就可以在内部维护树节点的展开可收起状态
总结
以上所述是小编给大家介绍的基于Vue制作组织架构树组件的全部内容。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
