中文 | English
: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: { ... } } } ...
组件数据,支持字段:
- 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" } ] }
点击节点触发,接收当前节点数据为参数
npm run serve
npm run build-bundle
Copyright (c) 2017-present, 前端路上
![]() | 1 AlphaTr 2018-08-06 09:18:14 +08:00 看到楼主做的这个,想到之前遇到的一个问题,仔细想想这种家谱图并不是一棵树,而是是一个有向图 |