vue 为element树形组件el-tree添加虚线，指示线_element-tree-line

需求需要实现一个带有指示线的树形组件，项目用的Vue，树形组件使用的是element的el-tree，所以想直接在element的组件上直接改样式实现。
先看最终实现的效果图：

思路
在控制台查看 el-tree 渲染后的HTML结构，找到相应的节点添加伪元素，利用伪元素的border属性加上定位实现虚线效果。

渲染后HTML结构如下，可发现树的结构是由一个类名为 el-tree-node 的div包裹着两个分别代表节点本身和子节点集的div 递归遍历生成的，类名为 el-tree-node 的div就是一个单位。所以我们只要在这个div上添加伪元素并修改样式就可以实现对应的虚线了。

遇到问题
按照上述的思路去实现，你会发现每一层的虚线无法根据缩进正确地定位，原因就是树形的每一层 el-tree-node 的宽度都是撑满整个树形大盒子的（如下图），我们的伪元素无法根据当前层的缩进数去定位。

解决办法
element的官网由提供一个属性 indent ，该属性可以控制相邻级节点间的水平缩进，单位为像素。我们可以将该属性设置为0，然后我们在css中为所有 el-tree-node 设置 padding-left ，就可以达到缩进的效果了！

由于每一层 el-tree-node 都被上一层的 el-tree-node 包裹着，上一层的padding会影响到下层的div位置，所以每一层的节点就不会撑满整个树形大盒子了，现在就可以直接根据 el-tree-node 定位伪元素了。

实现代码与注释

<el-tree
    class="tree-line"
    icon-class="el-icon-circle-plus-outline"
    :indent="0"
    :data="data"
></el-tree>

// 以下为scss，记得去掉scoped，或者使用/deep/

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

————————————————
版权声明：本文为CSDN博主「吕大瓜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42490398/article/details/107942461