Vue?element樹形控件添加虛線詳解

更新時間：2021年11月23日 15:12:56 作者：一只小木頭.

這篇文章主要為大家介紹了Vue?element樹形控件添加虛線，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>

1.實現效果

效果圖

2.實現代碼

樹形控件虛線的添加主要通過控制css來實現，并且在樹形控件的縮進數只能為0，令class=“mytree”

   <div class="mytree">
          <!--indent只能為0-->
          <el-tree
              :data="tree_data"
              :props="defaultProps"
              @node-click="handleNodeClick"
              indent="0"
              :render-content="renderContent"
          ></el-tree>
   </div>

css的設置為以下代碼，使用了::v-deep進行樣式穿透

<style lang="scss" scoped>
::v-deep .mytree {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //節(jié)點有間隙，隱藏掉展開按鈕就好了,如果覺得空隙沒事可以刪掉
  .el-tree-node__expand-icon.is-leaf{
    display: none;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }
  .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: 1px;
  }
  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }
  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }
}
</style>