最近公司在做一个基于vue开发的项目,项目需要开发一个展示组织架构的树组件,在网上搜了半天,没有找到合适的,下面小编给大家分享一个基于Vue制作组织架构树组件,需要的朋友参考下吧
由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vue)。在GitHub上找了半天,这类组件不多,也没有符合业务需求的组件,所以决定自己造轮子!
分析
既然是树,那么每个节点都应该是相同的组件
节点下面套节点,所以节点组件应该是一个 递归组件
那么,问题来了。递归组件怎么写?
递归组件
Vue官方文档是这样说的:
组件在它的模板内可以递归地调用自己。不过,只有当它有 name 选项时才可以这么做
接下来,我们来写一个树节点递归组件:
<template> <p class="org-tree-node"> <p class="org-tree-node-label">{{data.label}}</p> <p 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> </p> </p> </template> <script> export default { name: 'OrgTreeNode', props: { data: Object } } </script> <style> /* ... */ </style>
然后渲染这个这个组件,效果如下
至此,一个简单的组织架构树组件就完成了。
然而,事情还远远没有结束。。。
需求说:节点的label要支持定制,树要支持水平展示!
因此,我们对递归组件作如下修改:
<template> <p class="org-tree-node"> <p class="org-tree-node-label"> <slot>{{data.label}}</slot> </p> <p 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> </p> </p> </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('p', { 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('p', { 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('p', { 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
horizontal
问题总结
可以定义一个树的store,存储每个节点状态,这样就可以在内部维护树节点的展开可收起状态
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上是使用Vue如何制作组织架构树组件的详细内容。更多信息请关注PHP中文网其他相关文章!

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。 1.Python以简洁语法和丰富库生态着称,适用于数据分析和Web开发。 2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

JavaScript不需要安装,因为它已内置于现代浏览器中。你只需文本编辑器和浏览器即可开始使用。1)在浏览器环境中,通过标签嵌入HTML文件中运行。2)在Node.js环境中,下载并安装Node.js后,通过命令行运行JavaScript文件。

如何在Quartz中提前发送任务通知在使用Quartz定时器进行任务调度时,任务的执行时间是由cron表达式设定的。现�...

在JavaScript中如何获取原型链上函数的参数在JavaScript编程中,理解和操作原型链上的函数参数是常见且重要的任�...

在微信小程序web-view中使用Vue.js动态style位移失效的原因分析在使用Vue.js...

在Tampermonkey中如何对多个链接进行并发GET请求并依次判断返回结果?在Tampermonkey脚本中,我们经常需要对多个链...


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

Atom编辑器mac版下载
最流行的的开源编辑器

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

记事本++7.3.1
好用且免费的代码编辑器