vue el-tree添加层级指示线_el-tree加虚线

1.div中放个tree

注意设置：  :indent="0"，否则节点会出现较大缩进

 <div ref="treeDiv" class="tree-container">
    <el-tree id="tree" class="tree" @node-click="treeNodeClick"
             :indent="0"
             :props="defaultProps"
             :load="queryTreeNode"
             node-key="uniqueidentification" ref="tree" lazy>
    </el-tree>
  </div>

2.设置样式

注意：tree-container是tree父容器的class name，通过此方法设置tree的根节点样式

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

<style scoped>
 
  .tree /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
 
  .tree /deep/ .el-tree-node__children {
    padding-left: 16px;
  }
 
  .tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
  }
 
  .tree /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
  }
 
  .tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
  }
 
  .tree /deep/ .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
 
  .tree /deep/ .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
 
  .tree /deep/ .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }
 
  .tree /deep/ .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }
 
.tree-container { //树的parent，样式自定
  }
</style>

3.效果图