基于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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 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实现与ASP Banner组件相似的类
2006/10/09 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python pass详细介绍及实例代码
2016/11/24 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python机器学习库xgboost的使用
2020/01/20 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
学校献爱心活动总结
2014/07/08 职场文书
教师四风问题整改措施
2014/09/25 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
Python基础之元类详解
2021/04/29 Python
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android
JS实现简单的九宫格抽奖
2022/06/28 Javascript