![](https://i-blog.csdnimg.cn/blog_migrate/e1e9933d4daf0cbb32ccfe095939a97f.png)
注意设置indent=“0”,不然缩进会有好大距离,还要加class
<el-tree
ref="tree"
:data="treeListOpation"
accordion
node-key="id"
:highlight-current="false"
:props="defaultProps"
expand-on-click-node
:default-expand-all="false"
:filter-node-method="filterNode"
:default-expanded-keys="expandedList"
>
<style lang="scss">
.el-tree-node__content{
height: 35px !important;
}
.mytree .el-tree > .el-tree-node:after {
border-top: none;
}
.mytree .el-tree-node {
position: relative;
padding-left: 16px;
}
.mytree .el-tree-node__expand-icon.is-leaf{
display: none;
}
.mytree .el-tree-node__children {
padding-left: 16px;
}
.mytree .el-tree-node :last-child:before {
height: 38px;
}
.mytree .el-tree > .el-tree-node:before {
border-left: none;
}
.mytree .el-tree > .el-tree-node:after {
border-top: none;
}
.mytree .el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.mytree .el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.mytree .el-tree-node:before {
border-left: 1px dashed #215AAB;
bottom: 0px;
height: 100%;
top: -20px;
width: 1px;
}
.mytree .el-tree-node:after {
border-top: 1px dashed #215AAB;
height: 20px;
top: 17px;
width: 24px;
}
.mytree .el-tree-node.is-current.is-focusable > .el-tree-node__content{
background: #AACEFF;
}
.mytree .el-tree-node:focus > .el-tree-node__content {
background-color: #AACEFF !important;
}
.mytree .el-tree-node__content:hover{
background-color: #AACEFF !important;
}
.el-tree-node__content{
padding-left: 0 !important;
}
.head-container .el-icon-caret-right:before{
content: "\e6d9" !important;
color: #fff;
background: #215AAB;
font-weight: 700;
border: 1px solid #215AAB;
font-size: 16px;
border-radius: 50%;
}
.head-container .expanded.el-icon-caret-right:before{
content: "\e6d8" !important;
color: rgb(24,81,161);
background: rgb(214,225,242);
font-weight: 700;
border: 1px solid #a9cbef;
font-size: 16px;
border-radius: 50%;
}
.head-container .el-tree-node__expand-icon.expanded{
transform: rotate(0deg);
}
.custom-tree-node{
width: 100%;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 20px;
}
</style>