vue-tree-chart2

A vue component to display tree chart

Install

npm install vue-tree-chart2 --save

Usage

<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>

Attributes

| Name | Type | Required | Default | Description | | ---------- | ---- | -------- | ------- | -------------------------------------- | | datasource | json | yes | | Used to build structure of tree chart. |

Events

| Name | Parameters | Description | | ---------- | ---------- | ------------------------------------ | | node-click | node data | Triggered when the node was clicked. |

Scoped Slots

<template slot-scope="{ treeData }">
  <!-- feel free to customize the internal structure of node -->
</template>

Inspiration

vue-orgchart