基于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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
PHP5中MVC结构学习
2006/10/09 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
微信小程序实现手指触摸画板
2018/07/09 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python pandas模块基础学习详解
2019/07/03 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
安全标语大全
2014/06/10 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
承诺书范本
2015/01/21 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang