基于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 相关文章推荐
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
vue如何判断dom的class
Apr 26 Javascript
Vuex入门到上手教程
Jun 20 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 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分页显示制作详细讲解
2006/10/09 PHP
PHP中for循环语句的几种变型
2006/11/26 PHP
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
JS实现吸顶特效
2020/01/08 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
从Python的源码来解析Python下的freeblock
2015/05/11 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python格式化输出%s和%d
2018/05/07 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
小学安全教育材料
2014/02/17 职场文书
安全演讲稿大全
2014/05/09 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL