vue-tree-chart

:deciduous_tree: Vue2树形图组件

安装

npm i vue-tree-chart --save

使用

in template:

<TreeChart :json="treeData" />

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

转载于:https://www.cnblogs.com/refined-x/p/9430480.html

Vue组织架构图组件相关推荐

写一个组织架构图组件来深入认识vue函数式高阶组件
本文涉及到的知识点: Vue函数式组件递归函数深拷贝对象正则匹配近期在开发一个vue组织架构图组件时,为了实现高性能渲染和一些特殊用法,使用了函数式组件,要实现的效果是这样: 写一个组织架构图 ...
Vue组织架构树图组件vue-org-tree的使用
说明最近需要作出一个组织架构图来可视化展示一下,最后找到vue-org-tree这个组件,觉得效果还不错~,可选节点颜色.横向/纵向展开.打开/收起,在这记录一下使用方法,效果图如下: 快速开始安 ...
好用的基于vue的组织架构图组件
都是基于vue的组织架构图,有支持vue2.x和vue3.x,可自行选择使用一.vue-okr-tree(支持vue2) 文档地址:vue2-okr-tree 这个文档里面只有使用方法,不像vue3 ...
组织架构图实现——jOrgChart的使用
最近公司需要做一个组织架构图,具体的功能如下: 我这边是做了横向和纵向两种展示方式: 目前这个还不是最终定稿,先不管了,光做这些就花了我好几天的时间了.jq操作dom我已经忘光了.. 步骤1:百度检索 ...
使用Echars实现水滴状、环形图、分割图、堆叠、组织架构图、地图轮廓等图表
百度Echarts 水滴状图表横向柱形图分割块柱形图曲线面积图横向堆叠柱形图环形进度图饼状图饼状图多个标题组织架构图省市轮廓地图新疆省地图全国地图折线图阴影效果柱形折线混合图 ...
组织架构图怎么画？思维导图创作教程分享
组织架构图就是把组织分成若干部分,通过组织结构图,我们可以看出各部门之间的从属关系,也能让大家清楚了解自己的岗位.工作,使得组织的协调性更加明显,绘制一份专业明了的组织架构图其实很简单,学会以下几个步 ...
OrgChart组织架构图控件
利用OrgChart组织架构图控件欢迎加入公众号进行互动:
html组织架构插件,jQuery组织架构图插件okrTree.js
插件描述:jQuery组织架构图支持拖拽节点,支持插入标记节点,分支节点更新时间:2021-03-02 23:52:07 更新说明: 1. 修改默认主题, 2. 添加自定义主题接口var s = $ ...
好看的动态组织架构图的实现（JavaScript InfoVis Toolkit）
http://philogb.github.io/jit/ 插件下载地址,地址里面可找到英文api, http://philogb.github.io/jit/static/v20/Docs/fil ...

Vue组织架构图组件

vue-tree-chart

安装

使用

属性

json

事件

click-node

演示

构建

Vue组织架构图组件相关推荐

最新文章

热门文章