VUE使用vue-tree-color组件实现组织架构图（递归数据，简单明了）

npm

# use npm
npm install vue-tree-color

安装loader

npm install --save-dev less less-loader

Import Plugins

import Vue from 'vue'
import Vue2OrgTree from 'vue-tree-color'Vue.use(Vue2OrgTree)

开始

因为已经安装过了组件，所以可以直接使用，在vue页面中，直接使用组件标签，动态绑定data数据（data数据为递归数据即可）

<vue2-org-tree :data="data"/>

data数据放入页面中

其中，data数据中，id 每个元素不同的ID ，label为name， children为自己的子集数据

排列方式

刚才我们看到是默认排列方式，其实还有一种水平排列方式

# 只需要加上 horizontal 即可
<vue2-org-tree :data="data" :horizontal="true" />

效果如下

折叠展示

添加一个属性 collapsable

<vue2-org-tree :data="data" :horizontal="true" collapsable />

怎么展开呢，需要加一个组件自带方法

on-expand

 <vue2-org-tree :data="data" :horizontal="true" collapsable @on-expand="onExpand" />

js部分

methods: {collapse(list) {var _this = thislist.forEach(function(child) {if (child.expand) {child.expand = false}child.children && _this.collapse(child.children)})},onExpand(e, data) {if ('expand' in data) {data.expand = !data.expandif (!data.expand && data.children) {this.collapse(data.children)}} else {this.$set(data, 'expand', true)}}
}

效果如下

点击节点

添加一个方法 on-node-click

<vue2-org-tree :data="data" :horizontal="true" collapsable @on-expand="onExpand" @on-node-click="onNodeHandle" />

onNodeHandle(e, data) {// e是节点数据console.log(e)// data是渲染在节点上的数据console.log(data)
},

打印结果

其他功能

组件还提供了其他功能，大概比较常用的还有，设置节点颜色，移入移出功能，等等，我把github地址粘贴进来，有兴趣的可以自己了解

点击下方链基即可查看组件更多功能

https://github.com/hukaibaihu/vue-org-tree#readme

本人原创，欢迎浏览，如果觉得还符合您的需求，麻烦点个赞哦，谢谢！！！

VUE使用vue-tree-color组件实现组织架构图（递归数据，简单明了）相关推荐

组织架构图怎么画？思维导图创作教程分享
组织架构图就是把组织分成若干部分,通过组织结构图,我们可以看出各部门之间的从属关系,也能让大家清楚了解自己的岗位.工作,使得组织的协调性更加明显,绘制一份专业明了的组织架构图其实很简单,学会以下几个步 ...
写一个组织架构图组件来深入认识vue函数式高阶组件
本文涉及到的知识点: Vue函数式组件递归函数深拷贝对象正则匹配近期在开发一个vue组织架构图组件时,为了实现高性能渲染和一些特殊用法,使用了函数式组件,要实现的效果是这样: 写一个组织架构图 ...
组织架构图实现——jOrgChart的使用
最近公司需要做一个组织架构图,具体的功能如下: 我这边是做了横向和纵向两种展示方式: 目前这个还不是最终定稿,先不管了,光做这些就花了我好几天的时间了.jq操作dom我已经忘光了.. 步骤1:百度检索 ...
使用Echars实现水滴状、环形图、分割图、堆叠、组织架构图、地图轮廓等图表
百度Echarts 水滴状图表横向柱形图分割块柱形图曲线面积图横向堆叠柱形图环形进度图饼状图饼状图多个标题组织架构图省市轮廓地图新疆省地图全国地图折线图阴影效果柱形折线混合图 ...
好看的动态组织架构图的实现（JavaScript InfoVis Toolkit）
http://philogb.github.io/jit/ 插件下载地址,地址里面可找到英文api, http://philogb.github.io/jit/static/v20/Docs/fil ...
酒店预订、酒店检索、酒店详情、房间预订、订单管理、会员、优惠券、客房预订、高保真原型、酒店app、需求清单、组件规范、架构图、订单通知、服务通知、收藏、客服、搜索、导航、评价、支付、充值、登录、浏览
酒店预订.酒店检索.酒店详情.房间预订.订单管理.会员.优惠券.客房预订.高保真原型.酒店app.需求清单.组件规范.架构图.订单通知.服务通知.收藏.客服.搜索.导航.评价.支付.充值.登录.浏览 ...
OrgChart组织架构图控件
利用OrgChart组织架构图控件欢迎加入公众号进行互动:
html组织架构插件,jQuery组织架构图插件okrTree.js
插件描述:jQuery组织架构图支持拖拽节点,支持插入标记节点,分支节点更新时间:2021-03-02 23:52:07 更新说明: 1. 修改默认主题, 2. 添加自定义主题接口var s = $ ...
智能测温工作台、健康打卡、智能助手、防疫测温、体温监控、组织架构、模板监控、设备管理、组织架构、设备数据、设备监控、应用管理、企业管理、目标管理、文档说明、业务流程图、账号、权限、发票、axure
智能测温工作台.健康打卡.智能助手.防疫测温.体温监控.组织架构.设备管理.模板监控.设备管理.组织架构.设备数据.设备监控.应用管理.企业管理.目标管理.文档说明.业务流程图.账号.权限.发票管理. ...