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 ...