Vue要素ツリーコントロールに点線を追加する詳細な説明

   <div class="mytree">
          <!--インデントは 0 のみにできます-->
          <el-tree
              :data="ツリーデータ"
              :props="デフォルトプロパティ"
              @node-click="ハンドルNodeClick"
              インデント="0"
              :render-content="レンダリングコンテンツ"
          </el-tree>
   </div>

<style lang="scss" スコープ>
::v-deep .mytree {
  .el-tree > .el-tree-node:after {
    上境界線: なし;
  }
  .el-tree-node {
    位置: 相対的;
    左パディング: 16px;
  }
  //ノード間に隙間があるので、展開ボタンを非表示にします。隙間が問題ないと思われる場合は削除できます。el-tree-node__expand-icon.is-leaf{
    表示: なし;
  }
  .el-tree-node__children {
    左パディング: 16px;
  }
  .el-tree-node :最後の子:前 {
    高さ: 38px;
  }
  .el-tree > .el-tree-node:before {
    左境界線: なし;
  }
  .el-tree > .el-tree-node:after {
    上境界線: なし;
  }
  .el-tree-node:before {
    コンテンツ： "";
    左: -4px;
    位置: 絶対;
    右: 自動;
    境界線の幅: 1px;
  }
  .el-tree-node:after {
    コンテンツ： "";
    左: -4px;
    位置: 絶対;
    右: 自動;
    境界線の幅: 1px;
  }
  .el-tree-node:before {
    左境界線: 1px 破線 #4386c6;
    下: 0px;
    高さ: 100%;
    上: -26px;
    幅: 1px;
  }
  .el-tree-node:after {
    上境界線: 1px 破線 #4386c6;
    高さ: 20px;
    上: 12px;
    幅: 24px;
  }
}
</スタイル>