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