如何树形展示多层级数据(或者叫树形展示)（一）

  我们在工作中总会遇到各种各样的问题，有些可能是重复的工作，有些可能在你看来是很扯蛋的，但是，还是要去实现，因为BOSS就在那，业绩也在那等着你。
    前段时间，开完会之后又接到一些新的需求，其实之一就是要在一个页面展示所有数据，这些数据包括机器的状态：内存，磁盘，CPU，以及是应用本身的信息：接口的请求时间，95line,99line，错误率，报错等情况。
    至于怎么展示，我也不知道啊。那好吧，需求总是不清楚，只有做出一版之后，才会知道，这是我想要的，或者，这不是我想要的。
    在我的印象中，Element UI有个tree控件直接就可以树形展示，那除了这些还有哪些呢？感谢baidu, google以及其他技术类网站，通过搜索得知，基于目录的VUE至少可以使用：
        1. element ui中的tree组件
        2. d3 树形展示
        3. echarts中图形展示类型 “tree”
        4. 东方财富图谱中用的jsMind
    上面这些中d3, echarts对于子结点，用户的互动不是很好，至少在此时没有找到一个好的方式实现， element ui中的tree组件感觉展现形式也不太符合大佬口味，东方财富的是做完之后无意发现的，所以上面的4种我都没用，
因为我用的是table转换成tree这样的方式实现，因为table可以套table,或者其实东西，用起来比较方便，以后要增加什么更简单一些。
       还是对几种实现稍做交待：
        1. element ui中的tree组件示例官网很多

        2. d3 树形展示, 先安装package, 然后在项目中引用

<template >   
    <div class="tree-container" :id="id">
        <svg class="d3-tree ">
            <g class="container"/>
        </svg>
    </div>
</template>
<script>
/**
 * 树状图
 */
//数据
const dataset = {
    name:"中国",
    children:[
        {
            name:"浙江",
            children:[
                {name:"杭州" ,value:100},
                {name:"宁波",value:100},
                {name:"温州",value:100},
                {name:"绍兴",value:100}
            ]
        },
        {
            name:"新疆" , 
            children:
            [
                {name:"乌鲁木齐"},
                {name:"克拉玛依"},
                {name:"吐鲁番"},
                {name:"哈密"}
            ]
        },
        {
            name:"新疆" , 
            children:
            [
                {name:"乌鲁木齐"},
                {name:"克拉玛依"},
                {name:"吐鲁番"},
                {name:"哈密"}
            ]
        }
    ]
}
import * as d3 from 'd3'
export default {
    na