给element-ui2.0的Tree组件加阶梯线

先呈上结果展示

—->

一般给tree节点加竖线可以直接给可展开节点的包含块加border-left可以做到，但是由于element-ui的层级节点缩进padding-left只给到了可展开节点的.el-tree-node__content子元素上，每一个叶子节点的宽度都等于父级tree的宽度，我可以考虑用伪元素实现。

看一下dom结构

我首先需要的是拿到可展开节点.el-tree-node.is-expanded的高度，给.el-tree-node.is-expanded加伪元素可以拿到父级元素的高度，发现阶梯线所有都靠左，无法缩进；

.el-tree-node.is-expanded::before {
  content: '';
  background-color: transparent;
  height: 100%;
  width: 0px;
  border-right: 1px solid #000;
}
复制代码

改进一下，由于缩进的padding-left都是计算在.el-tree-node__content内联样式上，将伪元素添加到.el-tree-node.is-expand > .el-tree-node__content::before，阶梯线还是全部靠左，由于.el-tree-node__content的宽度并没有变化，left:0并不能有缩进，我也不能根据padding-left写left；

.el-tree-node.is-expanded > .el-tree-node__content {
  position: relative
}
.el-tree-node.is-expanded > .el-tree-node__content::before {
  content: '';
  background-color: transparent;
  height: 100%;
  width: 1px;
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px solid #000;
}
复制代码

理一下思路【其实想了好久】，我想拿到.el-tree-node__content的padding-left，有需要拿到.el-tree-node.is-expand的高度，我可以靠position的包含块让伪元素的包含块定位到.el-tree-node.is-expand,再利用继承拿到.el-tree-node__content的padding-left，最后实现方法：

.el-tree-node.is-expanded {
  position: relative;
}
.el-tree-node.is-expanded > .el-tree-node__content::before {
  content: '';
  background-color: transparent;
  height: calc(100% - 32px); //父级高度来自于最近的包含块
  width: 1px;
  position: absolute;
  top: 32px;
  left: 11px;
  padding-left: inherit; //继承缩进
  border-right: 1px solid #000;
}
复制代码

成功，开心?