您当前的位置:首页 > 电脑百科 > 程序开发 > 架构

我开源了第一个基于Vue的组织架构树组件

时间:2020-11-10 10:32:35  来源:  作者:

开门见山

Demo 演示地址:http://www.longstudy.club/vue-okr-tree-doc/index.html

github 地址:https://github.com/qq449245884/vue-okr-tree

项目背景

因为最近公司需要做一个OKR,OKR 里面有个对齐视图,是一个数型结构,如下图所示:

我开源了第一个基于Vue的组织架构树组件

 

就拿我 小智 来说,如果有人对齐我的 KR 就放到我的右边,如果是我对齐了谁的 KR,就放到我的左边,类似一个上下级的关系,所以这里我用两棵树来表示左边与右边的关系。

在GitHub上找了半天,这类组件不多,也没有符合业务需求的组件,所以决定自己造轮子!

分析

  • 既然是树,那么每个节点都应该是相同的组件
  • 节点下面套节点,所以节点组件应该是一个递归组件
  • 整棵树应该有一个全局的状态,用来管理从外部传入的值以及向外部提供的属性和方法。
  • 每相树节点应该也要有一个对应的节点状态,来管理节点自身属性和方法。

实现思路

递归组件

对于递归组件,Vue 官方文档是这样说的:

组件在它的模板内可以递归地调用自己。不过,只有当它有 name 选项时才可以这么做。

这里我用 OkrTreeNode.vue 来表示树的节点,里面是这样用递归,下面是该组件简定:

<template>
  <OkrTreeNode
    v-for="child in leftChildNodes"
    :node="child"
  ></OkrTreeNode>
</template>

export default {
  name: 'OkrTreeNode'
}

递归组件的使用需要注意的两点是组件里面要有组件name 以及结束递归的条件。

树的状态

对于树的状态,我用一个 TreeStore 类来表示,该实现方式主要是参考 ElementUI 中的 tree 组件。TreeStore 中的属性就表示我外部传入的 pros 或者 attr 或者 事件和方法,都在这个对象里面管理,具体的代码可以看这里:

https://github.com/qq449245884/vue-okr-tree/blob/main/src/lib/vue-okr-tree/model/tree-store.js

节点的状态

对于节点的状态,我用一个 Node 对象来表示,具体的代码可以看下面这个地址,这里就不展开说了:

https://github.com/qq449245884/vue-okr-tree/blob/main/src/lib/vue-okr-tree/model/node.js

Demo 演示

基础用法

基础的树形结构展示,默认方式垂直方向。

我开源了第一个基于Vue的组织架构树组件

 

水平方向

将 direction 属性设置为 horizontal 就可以展示水平方向。

我开源了第一个基于Vue的组织架构树组件

 

节点是否可被展开

节点可被展开,默认是不展开,通过show-collapsable设置节点可被展开。

我开源了第一个基于Vue的组织架构树组件

 

节点默认全部展开

通过设置 default-expand-all 默认展开所有节点,该参数只有在 show-collapsable为true 时有效

我开源了第一个基于Vue的组织架构树组件

 

可将 Tree 的某些节点设置为默认展开

我开源了第一个基于Vue的组织架构树组件

 

通过 default-expanded-keys 设置默认展开的节点。需要注意的是,此时必须设置 node-key ,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。

节点的样式

可自行设置节点的默认样式和选中的样式。

通过 label-class-name 设置节点的样式,支持字符和函数方式。通过 current-lable-class-name 设置当前节点选中的样式,支持字符和函数方式。

我开源了第一个基于Vue的组织架构树组件

 

节点自定义内容

可自行设置节点内容。通过 render-content 渲染节点内容。

我开源了第一个基于Vue的组织架构树组件

 

OKR 展示模式

该模式的出现,是为了实现跟飞书OKR 展示的视图一样效果,所以在 Tree 的模式下,扩展成左右两棵子树。该模式必须设置 onlyBothTree ,以及通过 leftData表示左子数的结构。

我开源了第一个基于Vue的组织架构树组件

 

OKR 展示模式之自定义节点内容

与上常规 Tree 一样,我们也可以通过自定义渲染函数来制定节点的内容。

通过 render-content 渲染节点内容,通过返回 node 中的 isLeftChild 判断是否是左边的树。

我开源了第一个基于Vue的组织架构树组件

 

节点过滤(不可展开)及支持的方法

通过关键字过滤树节点,在需要对节点进行过滤时,调用 Tree 实例的 filter 方法,参数为关键字。需要注意的是,此时需要设置 filter-node-method ,值为过滤函数。

我开源了第一个基于Vue的组织架构树组件

 

节点过滤(可被展开)

通过关键字过滤树节点,在需要对节点进行过滤时,调用 Tree 实例的 filter 方法,参数为关键字。需要注意的是,此时需要设置 filter-node-method ,值为过滤函数。

我开源了第一个基于Vue的组织架构树组件

 

支持的事件(不可展开)

不可展开时支持的事件有 节点点击 和 鼠标右键点击。

我开源了第一个基于Vue的组织架构树组件

 

支持的事件(可被展开)

可展开时支持的事件有 节点点击、鼠标右键点击,节点的展开以及节点的关闭。

我开源了第一个基于Vue的组织架构树组件

 

Attributes

 

我开源了第一个基于Vue的组织架构树组件

 


我开源了第一个基于Vue的组织架构树组件

 

props

 

我开源了第一个基于Vue的组织架构树组件

 

Events

 

我开源了第一个基于Vue的组织架构树组件

 

方法

 

我开源了第一个基于Vue的组织架构树组件

 

浏览器支持情况

Modern browsers and Internet Explorer 10+.

如果你觉得还不错的话,还请帮忙在 github 上给个 star,如果你觉得哪些需要优化的可以到 github 上提个 PR。



Tags:Vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  Tags: Vue  点击:(1)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Tags: Vue  点击:(14)  评论:(0)  加入收藏
开头最近要研究有什么新奇的产品和项目,发现一个网站很有意思,可以纯前端一键随机生成头像,刚好他们的代码是开源,并且基于vue3,我想开源拿出来给大家分享。效果: 开始项目本身基...【详细内容】
2021-12-03  Tags: Vue  点击:(15)  评论:(0)  加入收藏
问题后端已经配置好了跨域,前端本地搭建vue-cli测试环境的时候如何解决跨域?(前提进行了基本的axios封装)分析这个时候后端API是一个明确的外网环境(使用外网IP或固定域名访问),...【详细内容】
2021-11-03  Tags: Vue  点击:(55)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: Vue  点击:(34)  评论:(0)  加入收藏
一、Vue介绍1、什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、学习Vue的原因三大主流框架之一:Angular React Vue先进的前端设计模式:MVVM可以完全脱离服务器...【详细内容】
2021-10-22  Tags: Vue  点击:(51)  评论:(0)  加入收藏
什么是vuevue是尤雨溪在2014年发布的一个渐进式的js框架,它有着双向绑定的特性,同时它的虚拟dom技术让性能得到大大提升。最重要的就是它是渐进式的应用,你可以在你的项目中逐...【详细内容】
2021-09-22  Tags: Vue  点击:(77)  评论:(0)  加入收藏
前端框架:vue.js效果图: 图书管理显示,查询,删除 页面css样式:<style>* {margin: 0;padding: 0;}#app {width: 900px;padding: 20px;margin: 50px auto;box-shadow: 0 0 10px #82...【详细内容】
2021-09-17  Tags: Vue  点击:(91)  评论:(0)  加入收藏
本文分享自华为云社区《【云驻共创】vue3相比 vue2 的十项优点》,作者: 海拥 。Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这...【详细内容】
2021-09-16  Tags: Vue  点击:(72)  评论:(0)  加入收藏
1.vue create demo2.vue ui3.搜索 vue-cli-plugin-electron-builder,勾选,安装4.npm run electron:serve5.npm run electron:build6.build complete!构建完成!构建完成后,看一...【详细内容】
2021-09-09  Tags: Vue  点击:(63)  评论:(0)  加入收藏
▌简易百科推荐
为了构建高并发、高可用的系统架构,压测、容量预估必不可少,在发现系统瓶颈后,需要有针对性地扩容、优化。结合楼主的经验和知识,本文做一个简单的总结,欢迎探讨。1、QPS保障目标...【详细内容】
2021-12-27  大数据架构师    Tags:架构   点击:(3)  评论:(0)  加入收藏
前言 单片机开发中,我们往往首先接触裸机系统,然后到RTOS,那么它们的软件架构是什么?这是我们开发人员必须认真考虑的问题。在实际项目中,首先选择软件架构是非常重要的,接下来我...【详细内容】
2021-12-23  正点原子原子哥    Tags:架构   点击:(7)  评论:(0)  加入收藏
现有数据架构难以支撑现代化应用的实现。 随着云计算产业的快速崛起,带动着各行各业开始自己的基于云的业务创新和信息架构现代化,云计算的可靠性、灵活性、按需计费的高性价...【详细内容】
2021-12-22    CSDN  Tags:数据架构   点击:(10)  评论:(0)  加入收藏
▶ 企业级项目结构封装释义 如果你刚毕业,作为Java新手程序员进入一家企业,拿到代码之后,你有什么感觉呢?如果你没有听过多模块、分布式这类的概念,那么多半会傻眼。为什么一个项...【详细内容】
2021-12-20  蜗牛学苑    Tags:微服务   点击:(8)  评论:(0)  加入收藏
我是一名程序员关注我们吧,我们会多多分享技术和资源。进来的朋友,可以多了解下青锋的产品,已开源多个产品的架构版本。Thymeleaf版(开源)1、采用技术: springboot、layui、Thymel...【详细内容】
2021-12-14  青锋爱编程    Tags:后台架构   点击:(20)  评论:(0)  加入收藏
在了解连接池之前,我们需要对长、短链接建立初步认识。我们都知道,网络通信大部分都是基于TCP/IP协议,数据传输之前,双方通过“三次握手”建立连接,当数据传输完成之后,又通过“四次挥手”释放连接,以下是“三次握手”与“四...【详细内容】
2021-12-14  架构即人生    Tags:连接池   点击:(16)  评论:(0)  加入收藏
随着移动互联网技术的快速发展,在新业务、新领域、新场景的驱动下,基于传统大型机的服务部署方式,不仅难以适应快速增长的业务需求,而且持续耗费高昂的成本,从而使得各大生产厂商...【详细内容】
2021-12-08  架构驿站    Tags:分布式系统   点击:(23)  评论:(0)  加入收藏
本系列为 Netty 学习笔记,本篇介绍总结Java NIO 网络编程。Netty 作为一个异步的、事件驱动的网络应用程序框架,也是基于NIO的客户、服务器端的编程框架。其对 Java NIO 底层...【详细内容】
2021-12-07  大数据架构师    Tags:Netty   点击:(16)  评论:(0)  加入收藏
前面谈过很多关于数字化转型,云原生,微服务方面的文章。虽然自己一直做大集团的SOA集成平台咨询规划和建设项目,但是当前传统企业数字化转型,国产化和自主可控,云原生,微服务是不...【详细内容】
2021-12-06  人月聊IT    Tags:架构   点击:(23)  评论:(0)  加入收藏
微服务看似是完美的解决方案。从理论上来说,微服务提高了开发速度,而且还可以单独扩展应用的某个部分。但实际上,微服务带有一定的隐形成本。我认为,没有亲自动手构建微服务的经历,就无法真正了解其复杂性。...【详细内容】
2021-11-26  GreekDataGuy  CSDN  Tags:单体应用   点击:(35)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条