需求

项目需求给elementUI的el-tree添加辅助线，并且不能使用其他插件，没办法只能该样式了。

效果

代码

html

<template><div><el-scrollbar class="long-content"><el-tree node-key="id":data="deptTree"default-expand-allref="deptTree"><span class="custom-tree-node"slot-scope="{ node }"><el-tooltip class="item"effect="dark":content="node.label":open-delay="1000"placement="right"><span style="font-size: 14px;">{{ node.label }}</span></el-tooltip></span></el-tree></el-scrollbar></div>
</template>

css

<style lang="scss" scoped>.long-content {height: calc(100% - 40px);margin-top: 10px;box-sizing: border-box;::v-deep {// 设置树形组件节点的定位和左内边距.el-tree-node {position: relative;// padding-left: 13px;}// 设置树形组件节点的 before 伪类的样式.el-tree-node:before {width: 1px;height: 100%;content: '';position: absolute;top: -38px;bottom: 0;left: 0;right: auto;border-width: 1px;border-left: 1px dashed #b8b9bb;}// 设置树形组件节点的 after 伪类的样式.el-tree-node:after {width: 13px;height: 13px;content: '';position: absolute;left: 0;right: auto;top: 11px;bottom: auto;border-width: 1px;border-top: 1px dashed #b8b9bb;}// 设置树形组件首节点的左边框不显示.el-tree > .el-tree-node:before {border-left: none;}// 设置树形组件首节点的顶部边框不显示.el-tree > .el-tree-node:after {border-top: none;}// 设置树形组件末节点的 before 伪类的高度.el-tree .el-tree-node:last-child:before {height: 50px;}// 设置树形组件节点字体大小、以及取消左内边距.el-tree .el-tree-node__content {color: #000;font-size: 14px;padding-left: 0 !important;}// 设置树形组件孩子节点左内边距.el-tree .el-tree-node__children {padding-left: 11.5px;}// 设置树形组件复选框左右外边距.el-tree .el-tree-node__content > label.el-checkbox {margin: 0 5px 0 5px !important;}// 设置树形组件展开图标定位、图层、内边距.el-tree .el-tree-node__expand-icon {position: relative;z-index: 99;}// 设置树形组件叶子节点的默认图标不显示.el-tree .el-tree-node__expand-icon.is-leaf {display: none;}// 设置树形组件叶子节点的横线.el-tree .leaf-node-line {width: 23px;height: 13px;content: '';position: absolute;left: 13px;right: auto;top: 12px;bottom: auto;border-width: 1px;border-top: 1px solid #b8b9bb;}// 设置树形组件有叶子节点的左外边距.el-tree .el-tree-node__content:has(.is-leaf) {// color: aqua;margin-left: 24px !important;}}
}
</style>