基于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高级技巧分享
Feb 25 Javascript
js函数调用的方式
May 06 Javascript
js单词形式的运算符
May 06 Javascript
js中this用法实例详解
May 05 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 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
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JavaScript严格模式详解
2015/11/18 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
Vue面试题及Vue知识点整理
2018/10/07 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
python登录豆瓣并发帖的方法
2015/07/08 Python
python装饰器与递归算法详解
2016/02/18 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python 异或加密字符串的实例
2018/10/14 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
爱心倡议书范文
2014/05/12 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
筑梦中国心得体会
2016/01/18 职场文书
《迟到》教学反思
2016/02/24 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
Nginx限流和黑名单配置
2022/05/20 Servers