树形组件el-tree添加虚线，指示线

实现效果

el-tree配置

<el-tree
   :indent="0"
   class="tree-line"
   :data="areaOptions"
   :props="defaultProps"
   :highlight-current="true"
   :expand-on-click-node="false"
   ref="tree"
   default-expand-all
   @node-click="handleNodeClick"
 />

• 注意设置indent=“0”，不然缩进会有好大距离，还要加class

css样式

<style scoped lang="scss">
// 树样式
.tree-line{
  ::v-deep .el-tree-node{
    position: relative;
    padding-left: 16px; // 缩进量
  }
  ::v-deep .el-tree-node__children{
    padding-left: 16px; // 缩进量
  }
  // 竖线
  ::v-deep .el-tree-node::before{
    content:"";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #ccc;
  }
  // 当前层最后⼀个节点的竖线⾼度固定
  ::v-deep .el-tree-node:last-child::before{
    height: 38px; // 可以⾃⼰调节到合适数值
  }
  // 横线
  ::v-deep .el-tree-node::after{
    content:"";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #ccc;
  }
  // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
  & > ::v-deep .el-tree-node::after{
    border-top: none;
  }
  & > ::v-deep .el-tree-node::before{
    border-left: none;
  }
  // 展开关闭的icon
  ::v-deep .el-tree-node__expand-icon{
    font-size: 16px;
    // 叶⼦节点（⽆⼦节点）
    ::v-deep &.is-leaf{
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
</style>

• 注意我这里用了scoped,使用了scss,所以用了::v-deep