基于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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
JS原型与继承操作示例
May 09 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
利用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
Look And Say 序列php实现代码
2011/05/22 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python元字符的用法实例解析
2018/01/17 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
pandas去除重复列的实现方法
2019/01/29 Python
python开发游戏的前期准备
2019/05/05 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
python list转置和前后反转的例子
2019/08/26 Python
python实现LRU热点缓存及原理
2019/10/29 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
应用电子技术专业个人求职信
2013/09/21 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
推广普通话标语
2014/06/27 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL