English | 中文

vue-tree-chart

:deciduous_tree: A vue2 component to display tree chart

Install

1npm i vue-tree-chart --save

Usage

in template:

1<TreeChart :json="treeData" />

in script:

1import TreeChart from "vue-tree-chart";
2
3export default {
4	components: {
5    	TreeChart
6	},
7	data() {
8		return {
9			treeData: {
10				...
11			}
12		}
13	}
14	...

Prop

json

Component data to support those field：

1- name[String] to display a node name
2- image_url[String] to display a node image
3- children[Array] node`s children
4- mate[Array] node`s mate
5- class[Array] node`s class
6- extend[Boolean] show/hide node`s children, default True

Example：

1  {
2    name: 'root',
3    image_url: "https://static.refined-x.com/avat.jpg",
4    class: ["rootNode"],
5    children: [
6      {
7        name: 'children1',
8        image_url: "https://static.refined-x.com/avat1.jpg"
9      },
10      {
11        name: 'children2',
12        image_url: "https://static.refined-x.com/avat2.jpg",
13        mate: [{
14          name: 'mate',
15          image_url: "https://static.refined-x.com/avat3.jpg"
16        }],
17        children: [
18          {
19            name: 'grandchild',
20            image_url: "https://static.refined-x.com/avat.jpg"
21          },
22          {
23            name: 'grandchild2',
24            image_url: "https://static.refined-x.com/avat1.jpg"
25          },
26          {
27            name: 'grandchild3',
28            image_url: "https://static.refined-x.com/avat2.jpg"
29          }
30        ]
31      },
32      {
33        name: 'children3',
34        image_url: "https://static.refined-x.com/avat.jpg"
35      }
36    ]
37  }

Event

click-node(node)

Click on the node triggered, receive the current node data as a parameter

Run a demo

1npm run serve

Build

1npm run build-bundle

Copyright (c) 2017-present, 前端路上