el-tree 虚线连接子节点完美实现

1. 给el-tree标签的包裹层添加类名为 .tree-line

<div class="tree-wrap tree-line">
      <el-tree
        class="cur-tree"
        ref="treeRef"
        :props="props"
        :load="loadNode"
        node-key="id"
        :default-expanded-keys="[-1]"
        :default-checked-keys="[-1]"
        highlight-current
        :expand-on-click-node="false"
        @node-click="passParams"
        lazy>
    </el-tree>
</div>

2. 编写虚线所需的样式，直接复制即可

<style lang="scss">
// 强制清除掉子节点的padding-left的值，让虚线对齐
.tree-line .el-tree-node__content {
  padding-left: 0 !important;
}
// 虚线所需样式
.tree-line {
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .el-tree-node__children {
      .el-tree-node {
        position: relative;
        padding-left: 16px;
      }
    }
    //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
    .el-tree-node__expand-icon.is-leaf{
      width: 4px;
    }
    .el-tree-node__children {
      padding-left: 16px;
    }
    
    .el-tree-node :last-child:before {
      height: 44px;
    }
    
    .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 #e6e6e6;
      bottom: 0px;
      height: 100%;
      top: -26px;
      width: 1px;
    }
    
    .el-tree-node:after {
      border-top: 1px dashed #e6e6e6;
      height: 20px;
      top: 18px;
      width: 20px;
    }
  }
</style>