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" />
js
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
智能测温工作台.健康打卡.智能助手.防疫测温.体温监控.组织架构.设备管理.模板监控.设备管理.组织架构.设备数据.设备监控.应用管理.企业管理.目标管理.文档说明.业务流程图.账号.权限.发票管理. ...
最新文章
- Go编程基础 - 常量与运算符
- hdu 3613 扩展kmp+回文串
- 课时 11:可观测性:你的应用健康吗?(莫源)
- Lambda-函数式接口(1)
- jquery多维对象计算个数_山东省2005年专升本计算机考试真题2??
- 单机倒立摆系统建模与仿真
- vscode代码对比功能
- 服务器安装julia_julia | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror...
- SQLSERVER读懂语句运行的统计信息
- 安卓标题栏优化(1)——纪念火影--隐身术
- rtx web 分级管理系统 二次开发
- Elastic认证考试过程(2022.11.13 06:15)
- 多python版本共存的环境中,查看 pip 命令对应的 python 版本
- 【Linux 中国】Simula 诞生之前的面向对象程序设计
- 漫游测试之性能测试(5.5-查询设计)
- 主流相机 RTSP地址格式
- FPGA和CPLD对比
- Linux内核块设备总结(一)
- c/c++ 表达式求值
- pthread_cond_wait详解