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

需求需要实现一个带有指示线的树形组件，项目用的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