所在项目对树的要求是连接线要连接到叶子元素，但是antd自带的连接线没有，并且在枝叶数量很多的情况下，antd的连接线有时会有不显示的问题，所以需要手动自己写。具体用到的方法主要是利用伪元素来划线。红色线是想要增加的：
下图是项目想要的效果：
首先，隐藏Antd本身的灰色连接线：
ant-tree-show-line .ant-tree-indent-unit::before {
// border-color: white !important;
// display: none;
border-right: 1px solid transparent !important;
}
display：none被注释掉是因为会影响到伪元素的显示，所以选择使原来的样式变透明。
接着，用伪元素画出我们想要的线：
先是枝干之间的连接线
.ant-tree .ant-tree-indent-unit::before {
border-left: 1px solid khaki !important;
height: 70px;
left: -13px;
content: "";
z-index: -1;
}
接着是枝叶之间的连接线：
枝叶之间的补充线，补充长度：
.ant-tree .ant-tree-switcher-noop::before {
border-left: 1px solid khaki;
border-bottom: 1px solid khaki;
content: '';
position: absolute;
height: 32px; //28
width: 27px;
top: -16px; //12
left: -13px;
}
上面有些线会显示到切换按钮的图标中，这里主要是通过设置z-index:-1解决的。 为实现这次任务，意外醒悟了原来z-index作用在同一个父元素下的子元素，对，就是这个简单的知识点。
2022/1/6更新 基于上次修改伪元素后，测试提出了一个bug,总的来说就是在特定的情况下，伪元素画的线消失不见了。
因为这颗tree组件是二次封装的antd tree，所以笔者想着同样的组件在哪里使用都应该是一样的，并且查看了其他几处使用相同组件的地方，伪元素画出的线也是好好的。一时间抓耳挠腮实在想不出问题出在哪里。但是基本能确定原因就是因为设置了z-index：-1导致的。反复尝试后，灵机一动突然想起来"层叠上下文"，想着会不会是因为外部元素的样式导致当前的层叠上下文下，z-index：-1使线处于最底层，从而被其他元素遮挡住了。于是尝试着想改变tree组件的层叠上下文。抱着试试看的心态，在tree组件的样式里添加了position：sticky，线————就这么神奇的出现了。而且其他的地方也没有任何影响。后来查阅资料发现这个问题能够解决的原因可能是在这里，来自MDN：
由于tree组件有了自己新的层叠上下文，所以其子元素的伪元素的z-index设置成-1,也是相对于tree这个组件而言的。
