vue部门结构图_Vue组织架构图组件
vue-tree-chart
:deciduous_tree: Vue2树形图组件
安装
npm i vue-tree-chart --save
使用
in template:
in script:
import TreeChart from "vue-tree-chart";
export default {
components: {
TreeChart
},
data() {
return {
treeData: {
...
}
}
}
...
属性
json
组件数据,支持字段:
- name[String] 节点名称
- image_url[String] 节点图片
- children[Array] 节点后代
- mate[Object] 节点配偶
示例:
{
name: 'root',
image_url: "https://static.refined-x.com/avat.jpg",
children: [
{
name: 'children1',
image_url: "https://static.refined-x.com/avat1.jpg"
},
{
name: 'children2',
image_url: "https://static.refined-x.com/avat2.jpg",
mate: {
name: 'mate',
image_url: "https://static.refined-x.com/avat3.jpg"
},
children: [
{
name: 'grandchild',
image_url: "https://static.refined-x.com/avat.jpg"
},
{
name: 'grandchild2',
image_url: "https://static.refined-x.com/avat1.jpg"
},
{
name: 'grandchild3',
image_url: "https://static.refined-x.com/avat2.jpg"
}
]
},
{
name: 'children3',
image_url: "https://static.refined-x.com/avat.jpg"
}
]
}
事件
click-node
点击节点触发,接收当前节点数据为参数
演示
npm run serve
构建
npm run build-bundle
Copyright (c) 2017-present, 前端路上
vue-tree 组织架构图/树形图自动生成(含添加、删除、修改)
项目中用代码生成组织架构图 有新增,编辑,删除的功能 生成树形图的组件git-hub地址: https://github.com/tower1229/Vue-Tree-Char ...
使用jOrgChart插件实现组织架构图的展示
项目要做组织架构图,要把它做成自上而下的树形结构. 一.说明 (1)通过后台查询数据库,生成树形数组结构,返回到前台. (2)需要引入的js插件和css文件: ①jquery.jOrgChart.cs ...
js前端使用jOrgChart插件实现组织架构图的展示
项目要做组织架构图,要把它做成自上而下的树形结构. 需要购买阿里云产品的,可以点击此链接购买,有红包优惠哦: https://promotion.aliyun.com/ntms/yunparter/i ...
做一个vue轮播图组件
根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...
python生成组织架构图(网络拓扑图、graph.editor拓扑图编辑器)
Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件的扩展项目,旨在提供可供扩展的拓扑图编辑工具, 拓扑图展示.编辑.导出.保存等功能,此外 ...
(六十五)c#Winform自定义控件-思维导图/组织架构图(工业)
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...
vue自定义轮播图组件 swiper
1.banner 组件 components/Banner.vue
vue2-org-tree 基于VUE的部门组织架构组件,增删节点实现
本文所用组件传送门:vue-org-tree 本文基于antd (其他前端组件框架操作基本都类似的: iview,elementui,boostrap-vue...) 当然,github上还有其他类似 ...
随机推荐
Python为什么要self
Python要self的理由 Python的类的方法和普通的函数有一个很明显的区别,在类的方法必须有个额外的第一个参数 (self ),但在调用这个方法的时候不必为这个参数赋值 (显胜于隐 的引发). ...
谈论XSS
XSS 叫跨站脚本攻击(Cross Site Script),那么XSS原本应该叫做CSS,但是由于CSS的简称已经被连级样式表 使用了,所以就换个称谓XSS. 为什么叫做跨站脚本攻击呢? 它的意思就 ...
深入理解JavaScript的变量作用域(转载Rain Man之作)
在学习JavaScript的变量作用域之前,我们应当明确几点: JavaScript的变量作用域是基于其特有的作用域链的. JavaScript没有块级作用域. 函数中声明的变量在整个函数中都有定义. ...
linux中fork()函数详解(转)
转自:http://blog.csdn.net/jason314/article/details/5640969 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过 ...
Dynamics CRM ISV文件夹禁用后的解决方案
众所周知微软在CRM2011的12补丁后取消了对ISV文件夹的支持,那我们自定义开发的一些web应用或者是想部署个服务该怎么办,有的选择了另开一个站点发布.我们以服务为例这样的另开站点的发布方式会导致 ...
BZOJ 1833 数字计数 数位DP
题目链接 做的第一道数位DP题,听说是最基础的模板题,但还是花了好长时间才写出来..... 想深入了解下数位DP的请点这里 先设dp数组dp[i][j][k]表示数位是i,以j开头的数k出现的次数 有 ...
myeclipse 10配置jboss 7.1.1无法启动Error: Could not create the Java Virtual Machine
myeclipse 10中配置jboss 7.1.1,多写了个server name,结果死活启动不了.后来,发现了这个细节. 错误显示: 错误源头: 删掉Server name后,可以完美启动 小问 ...
[转]学习笔记_springmvc注解形式的开发参数接收
springmvc基于注解的开发 注解第一个例子 1. 创建web项目 2. 在springmvc的配置文件中指定注解驱动,配置扫描器 &l ...
bit 32/64
[asm]64位编译32位汇编需要注意的 汇编语言在32位和64位下有区别 32位的汇编在代码前增加.code32 as可以通过--32指定生成32位汇编 在64位系统下ld链接生成3 ...
Angularjs中的超时处理
关键代码: // 定义一个定时器, 设置5s为请求超时时间 var timer = $timeout(function () { console.log('登录超时!'); // 模拟提示信息 },5 ...
vue部门结构图_Vue组织架构图组件相关推荐
- 写一个组织架构图组件来深入认识vue函数式高阶组件
本文涉及到的知识点: Vue函数式组件 递归函数 深拷贝对象 正则匹配 近期在开发一个vue组织架构图组件时,为了实现高性能渲染和一些特殊用法,使用了函数式组件,要实现的效果是这样: 写一个组织架构图 ...
- html5控件结构图,OrgChart组织架构图控件
插件描述:jQuery OrgChart 是一个用来绘制组织结构图的 jQuery 插件. 可以自己定加载自己想要的组织架构,通过json的形式 该插件为画组织架构图插件,通过OrgChart API ...
- 好用的基于vue的组织架构图组件
都是基于vue的组织架构图,有支持vue2.x和vue3.x,可自行选择使用 一.vue-okr-tree(支持vue2) 文档地址:vue2-okr-tree 这个文档里面只有使用方法,不像vue3 ...
- Vue组织架构图组件
vue-tree-chart :deciduous_tree: Vue2树形图组件 安装 npm i vue-tree-chart --save 使用 in template: <TreeC ...
- Vue组织架构树图组件vue-org-tree的使用
说明 最近需要作出一个组织架构图来可视化展示一下,最后找到vue-org-tree这个组件,觉得效果还不错~,可选节点颜色.横向/纵向展开.打开/收起,在这记录一下使用方法,效果图如下: 快速开始 安 ...
- 组织架构图实现——jOrgChart的使用
最近公司需要做一个组织架构图,具体的功能如下: 我这边是做了横向和纵向两种展示方式: 目前这个还不是最终定稿,先不管了,光做这些就花了我好几天的时间了.jq操作dom我已经忘光了.. 步骤1:百度检索 ...
- 组织架构图怎么画?思维导图创作教程分享
组织架构图就是把组织分成若干部分,通过组织结构图,我们可以看出各部门之间的从属关系,也能让大家清楚了解自己的岗位.工作,使得组织的协调性更加明显,绘制一份专业明了的组织架构图其实很简单,学会以下几个步 ...
- 使用Echars实现水滴状、环形图、分割图、堆叠、组织架构图、地图轮廓等图表
百度Echarts 水滴状图表 横向柱形图 分割块柱形图 曲线面积图 横向堆叠柱形图 环形进度图 饼状图 饼状图多个标题 组织架构图 省市轮廓地图 新疆省地图 全国地图 折线图阴影效果 柱形折线混合图 ...
- OrgChart组织架构图控件
利用OrgChart组织架构图控件 欢迎加入公众号进行互动:
- html组织架构插件,jQuery组织架构图插件okrTree.js
插件描述:jQuery组织架构图支持拖拽节点,支持插入标记节点,分支节点 更新时间:2021-03-02 23:52:07 更新说明: 1. 修改默认主题, 2. 添加自定义主题接口var s = $ ...
最新文章
- 最重要的事情 一 、消息通信机制(1)ant 打包方法(2) system.out.println()用法 二、UML学习
- python官网下载步骤手机-一招解决:各种版本的Python下载安装教程
- 装饰模式(Decorator)简介
- Go语言与数据库开发:01-09
- c# throw抛出上一个异常
- TUXEDO运行监控命令概述
- Coding List
- C#人脸识别入门篇-STEP BY STEP人脸识别—静态照片人脸检测
- VSCode开发react-native app进行android apk打包
- 常大宿舍路由器安装教程
- 向量的各种积,都有哪些,分别如何表示
- AWS申请邮件域名和ip绑定
- imx6ul pwm 调试
- java中的\uxxxx
- 51开发实例 基于51单片机的模拟电梯系统
- 坚果Pro 电源键失效的处理
- [转载] 老鼠夹的寓言
- Android 前置摄像头预览与编码
- 响应式网页设计教程:展示响应式设计的基本原理
- 如何 获得 自身程序 的 版本号 ???? 急!!!!!!!!!!!!