如何在Vue中构建树形图

vue create tree-view

cd tree-view

npm install vue-tree-chart

<template>
  <div>
    <tree-chart :data="treeData" :options="treeOptions"></tree-chart>
  </div>
</template>

<script>
import TreeChart from 'vue-tree-chart';

export default {
  components: {
    TreeChart
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 1.1',
              children: [
                {
                  id: 3,
                  label: 'Node 1.1.1',
                  children: []
                },
                {
                  id: 4,
                  label: 'Node 1.1.2',
                  children: []
                }
              ]
            },
            {
              id: 5,
              label: 'Node 1.2',
              children: []
            }
          ]
        }
      ],
      treeOptions: {
        nodeWidth: 150,
        nodeHeight: 50
      }
    };
  }
};
</script>

<template>
  <div id="app">
    <TreeView />
  </div>
</template>

<script>
import TreeView from './components/TreeView.vue';

export default {
  name: 'App',
  components: {
    TreeView
  }
};
</script>

npm run serve