技術標籤：筆記

前幾天需要展示一個檔案目錄，選擇到的是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了