移动端vue实现部门结构功能_基于Vue的组织架构树组件
由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vue)。在GitHub上找了半天,这类组件不多,也没有符合业务需求的组件,所以决定自己造轮子!
分析
既然是树,那么每个节点都应该是相同的组件
节点下面套节点,所以节点组件应该是一个递归组件
那么,问题来了。递归组件怎么写?
递归组件
组件在它的模板内可以递归地调用自己。不过,只有当它有 name 选项时才可以这么做
接下来,我们来写一个树节点递归组件:
name: 'OrgTreeNode',
props: {
data: Object
}
}
然后渲染这个这个组件,效果如下
至此,一个简单的组织架构树组件就完成了。
然而,事情还远远没有结束。。。
需求说:节点的label要支持定制,树要支持水平展示!
因此,我们对递归组件作如下修改:
{{data.label}}
name: 'OrgTreeNode',
props: {
data: Object
}
}
我们使用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 = []
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组件里面声明:
export default {
name: 'OrgTree',
components: {
OrgTreeNode: {
render,
functional: true
}
}
}
至此我们的函数式组件改造完成了,至于水平显示用样式控制就可以了。
CSS样式
样式使用less预编译。节点之间的线条采用了 :before、:after伪元素的border绘制
功能扩展
添加了 labelClassName 属性,以支持对节点label的样式定制
添加了 labelWidth 属性,用于限制节点label的宽度
添加了 props 属性,参考element-ui的tree组件的props属性,以支持复杂的数据结构
添加了 collapsable 属性,以支持子节点的展开和折叠(展开和折叠操作需调用者实现)
刚开始采用了flex布局,但是要兼容IE9,后来改成了display: table布局
最终效果
default
horizontal
问题总结
可以定义一个树的store,存储每个节点状态,这样就可以在内部维护树节点的展开可收起状态
参考资料
移动端vue实现部门结构功能_基于Vue的组织架构树组件相关推荐
- 移动端vue实现部门结构功能_基于Vue制作组织架构树组件
编程之家收集整理的这篇文章主要介绍了基于Vue制作组织架构树组件,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vu ...
- 基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based ...
- vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下 作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
- vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
- vue 移动到图片浮动_基于Vue实现拖拽升级(九宫格拖拽)
前言 在本文中将会用Vue完成九宫格拖拽效果,同时介绍一下网格布局.具体代码以及demo可以点以下超链接进入 效果实例 Demo 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称 ...
- vue设置输入框输入长度_基于vue的限制输入框可输入字节数的解决方案
2018年07月11日 基于vue的限制输入框可输入字节数的解决方案 需求:input输入框输入上限4个字节.达到上限则不能继续输入,其中1个英文表示1个字节.1个中文表示2个字节. 看到这个需求,第 ...
- vue 移动端头像裁剪_基于vue的移动端图片裁剪压缩处理
前端时间做Vue项目的时候,要用到图片压缩处理,网上查阅了资料后,发现并不能满足实际的业务需求:于是,自己结合网上的资料写了一个,有兴趣的小伙伴不妨试试~ 废话不多说,先上效果图,无图无真相嘛~ 效果 ...
- bootstrap树节点如何设置默认不展开_我开源了一个基于Vue的组织架构树组件
开门见山 Demo 演示地址:http://www.longstudy.club/vue... github 地址:https://github.com/qq44924588... 项目背景 因为最近 ...
- 在vue中实现picker样式_基于Vue实现timepicker
主要用到的还是Vue的基本知识而已,不过要想到的细节很多. 先放效果,点击上框,显示timepicker.而且可以根据点击的是时还是分来改变圆盘的数字. 这里我用了两个组件,和,这里的时和分的数值我挂 ...
最新文章
- 把博士男友的论文和资料全删了,然后……
- 算法------------ 最长公共前缀
- OpenCV-图像的基本操作-01
- 引用一个项目作为library的操作步骤---开发中遇到的问题(二)
- File.Create创建文件后,需要释放…
- matplotlib给坐标轴特定的位置加上文字
- Windows10安装Cmder(图文教程)
- mysql双主启停_Mysql 多实例配置与启停
- python鼠标位置_用python3 返回鼠标位置的实现方法(带界面)
- Exchange 2010安装必要条件
- 暂别ACM,转移阵地
- cassandra数据库可视化工具
- 个人网站建设专业定制,个人网站建设怎么做
- 零基础学python这本书怎么样-怎样学 Python?
- 如何按要求批量修改Excel工作表名称
- [4G5G基础学习]:流程 - 4G LTE 核心网的Attach流程
- android系统怎么刷机教程,如何刷新Android系统? Android手机通用刷机教程
- shell脚本:遍历指定文件夹下.jar后缀的文件,并备份到目标文件夹
- Linux下重启mysql的正确方法
- 云服务器读不出U盘,云服务器不识别u盘
热门文章
- Linux操作系统命令解释
- 【李宏毅2020 ML/DL】P25 ELMO, BERT, GPT
- OC-NSFileManager
- f.readline()的奇妙坑点
- JDK Dynamic Proxy_JDK动态代理
- 二叉搜索树 java_二叉查找树之 Java的实现【下】
- python dlib opencv人脸识别准确度_基于dlib和opencv库的人脸识别
- ros::spin() 和 ros::spinOnce() 区别及详解
- opencv 环境相关
- linux的O的字体让我满意那些