基于element-ui Tree树形控件 生成 文件目录 缩进树

前几天需要展示一个文件目录，选择到的是AntV G6 的缩进树。
收缩效果确实不错，不过在使用的过程中 遇到了 G6 的 BUG，传入数据对象的最后一层，不能正常展开收缩且会无限循环报错 。
索性就用 element Tree 组件 + border 边框 来制作 缩进图。

这是G6效果

这是 element 效果

PS 正常情况下，文件目录缩进树 用图类 做出来的效果肯定会好一点。

---

首先 element Tree树形组件 先引入

<div id="dataset-label-visual-container" class="mytree">
      <el-tree
        :data="dataList"
        :indent="0"
        node-key="id"
        :props="defaultProps"
        :default-expand-all="true"
        class="filter-tree"
      >
      </el-tree>
    </div>

注意： 要给到 indent=“0” 不然线的间距会很大。 外层 div 给 mytree ，el-tree 给 filter-tree

---

<style>
.mytree /deep/{
     .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .el-tree-node {
      position: relative;
      padding-left: 16px;
    }
    .el-tree-node__expand-icon.is-leaf{
      display: none;
    }
    .el-tree-node__children {
      padding-left: 25px;
    }
 
    .el-tree-node :last-child:before {
      height: 38px;
    }
 
    .el-tree > .el-tree-node:before {
      border-left: none;
    }
 
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
 
    .el-tree-node:before {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }
 
    .el-tree-node:after {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 5px;
    }
 
    .el-tree-node:before {
      border-left: 2px dashed #b8b9bb;
      bottom: 0px;
      height: 100%;
      top: -26px;
      width: 1px;
    }
 
    .el-tree-node:after {
      border-top: 2px dashed #b8b9bb;
      height: 30px;
      top: 12px;
      width: 28px;
    }
    .el-tree-node__label{
      font-size: 20px;
    }
    .el-tree-node__content{
      margin-left: 10px;
      margin-top: 5px;
    }
  }
</style>

把 CSS 样式加上就OK了