基于Vue制作组织架构树组件


Posted in Javascript onDecember 06, 2017

基于Vue制作组织架构树组件

由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于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>

然后渲染这个这个组件,效果如下

基于Vue制作组织架构树组件 

至此,一个简单的组织架构树组件就完成了。

然而,事情还远远没有结束。。。

需求说:节点的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>

至此我们的函数式组件改造完成了,至于水平显示用样式控制就可以了。

CSS样式

样式使用less预编译。节点之间的线条采用了 :before 、 :after 伪元素的 border 绘制

功能扩展

  • 添加了 labelClassName 属性,以支持对节点label的样式定制
  • 添加了 labelWidth 属性,用于限制节点label的宽度
  • 添加了 props 属性,参考 element-ui 的 tree 组件的props属性,以支持复杂的数据结构
  • 添加了 collapsable 属性,以支持子节点的展开和折叠(展开和折叠操作需调用者实现)
  • 刚开始采用了 flex 布局,但是要兼容IE9,后来改成了 display: table 布局

最终效果:

default

基于Vue制作组织架构树组件

horizontal

基于Vue制作组织架构树组件

问题总结

可以定义一个树的store,存储每个节点状态,这样就可以在内部维护树节点的展开可收起状态

总结

以上所述是小编给大家介绍的基于Vue制作组织架构树组件的全部内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 #Javascript
如何重置vue打印变量的显示方式
Dec 06 #Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 #Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 #Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 #Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 #Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 #Javascript
You might like
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Python判断有效的数独算法示例
2019/02/23 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
效能监察建议书
2014/05/19 职场文书
工作说明书格式
2014/07/29 职场文书
交通事故和解协议书
2015/01/27 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
Go语言特点及基本数据类型使用详解
2022/03/21 Golang