这篇文章主要为大家详细介绍了基于Vue制作组织架构树组件,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
【q1010.com温馨提示:图片暂缺】
由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于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>
然后渲染这个这个组件,效果如下
【q1010.com温馨提示:图片暂缺】
至此,一个简单的组织架构树组件就完成了。
然而,事情还远远没有结束。。。
需求说:节点的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>
至此我们的函数式组件改造完成了,至于水平显示用样式控制就可以了。
样式使用less预编译。节点之间的线条采用了 :before 、 :after 伪元素的 border 绘制
最终效果:
default
【q1010.com温馨提示:图片暂缺】
horizontal
【q1010.com温馨提示:图片暂缺】
可以定义一个树的store,存储每个节点状态,这样就可以在内部维护树节点的展开可收起状态
以上所述是小编给大家介绍的基于Vue制作组织架构树组件的全部内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持!
本文来自:http://www.q1010.com/184/4170-0.html
注:关于基于Vue制作组织架构树组件的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。