A vue component to display tree chart
npm install vue-tree-chart2 --save
<template>
<div id="app">
<tree-chart :datasource="ds" @node-click="handleNodeClick">
<template slot-scope="{ treeData }">
<div class="chart-card">
<div class="chart-card-header">{{ treeData.name }}</div>
<div>
<span>{{ `leader:${treeData.leader}` }}</span>
</div>
</div>
</template>
</tree-chart>
</div>
</template>
<script>
import TreeChart from 'vue-tree-chart2'
import 'vue-tree-chart2/dist/treechart.css'
export default {
name: 'app',
components: {
TreeChart,
},
data() {
return {
ds: {
name: 'Empire',
leader: 'Tom',
extend: true,
children: [
{
name: 'Department of Education',
leader: 'Jack',
extend: false,
},
{
name: 'Department of Defense',
leader: 'Lily',
extend: false,
children: [
{
name: 'Army',
leader: 'Lucy',
},
{
name: 'Navy',
leader: 'Jerry',
children: [
{
name: 'Marine Corps',
leader: 'Marry',
},
{
name: 'Coast Guard',
leader: 'Rose',
},
],
},
{
name: 'Airforce',
leader: 'Cooper',
},
],
},
],
},
};
},
methods: {
handleNodeClick(treeData) {
console.log('node ' + treeData.name + ' is selected');
},
},
};
</script>
Name | Type | Required | Default | Description |
---|---|---|---|---|
datasource | json | yes | Used to build structure of tree chart. |
Name | Parameters | Description |
---|---|---|
node-click | node data | Triggered when the node was clicked. |
<template slot-scope="{ treeData }">
<!-- feel free to customize the internal structure of node -->
</template>