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