2023年6月22日发(作者：)

elementUI树形组件el-tree添加层级虚线，指⽰线看实现效果element的官⽹由提供⼀个属性 indent ，该属性可以控制相邻级节点间的⽔平缩进，单位为像素。我们可以将该属性设置为0，然后我们在css中为所有 el-tree-node 设置 padding-left ，就可以达到缩进的效果了！由于每⼀层 el-tree-node 都被上⼀层的 el-tree-node 包裹着，上⼀层的padding会影响到下层的div位置，所以每⼀层的节点就不会撑满整个树形⼤盒⼦了，现在就可以直接根据 el-tree-node 定位伪元素了。实现代码 {{ }} css样式//

重新修改tree组件样式.tree-line { .el-tree-node { position: relative; padding-left: 16px; } .el-tree-node__content { margin-top: 10px; } .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; } .el-tree-node__expand-icon { font-size: 18px; color: #000; &.is-leaf { color: transparent; // display: none; } }