树控件样式穿透

效果图： 

 原始效果：

一、整个树控件的背景色

二、添加节点之间的线连接

三、hover时节点背景色设置

四、点击时节点背景色设置

五、点击节点展开或收起时节点的背景色设置

html代码：

<div class="tree-container">

   <el-tree class="tree filter-tree"
     :data="data" 
     :props="defaultProps"
     @node- click="handleNodeClick" 
     default-expand-all="true"></el-tree>

</div>

css代码：

.tree-container {

    width: 300px;

    overflow: auto;

    //   border: 1px solid #ccc;

}



.custom-tree-node {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 14px;

    padding-right: 8px;

}



.el-tree-node.is-current>.el-tree-node__content {

    background-color: #f1f4f5;

}



.classTitle {

    padding-left: 10px;

    width: 100%;

    height: 42px;

    background-color: #fafafa;

    line-height: 42px;

    font-weight: bold;

}



.el-form .el-form-item {

    margin: 0px 0 !important;

}



.tree-menu {

    width: 200px;

    height: 300px;

    overflow: auto;

}



.tree {

    display: inline-block;

    background-color: #121f3a;

    min-width: 100%;

}



.tree /deep/ .el-tree-node {

    position: relative;

    padding-left: 16px;

}



.tree /deep/ .el-tree-node__children {

    padding-left: 16px;

}



.tree /deep/ .el-tree-node :last-child:before {

    height: 38px;

}



.tree /deep/ .el-tree>.el-tree-node:before {

    border-left: none;

}



// 树控件

.tree-container /deep/ .el-tree>.el-tree-node:after {

    border-top: none;

}



.tree /deep/ .el-tree-node:before {

    content: '';

    left: -4px;

    position: absolute;

    right: auto;

    border-width: 1px;

}



.tree /deep/ .el-tree-node:after {

    content: '';

    left: -4px;

    position: absolute;

    right: auto;

    border-width: 1px;

}



.tree /deep/ .el-tree-node__expand-icon.is-leaf {

    display: none;

}



.tree /deep/ .el-tree-node:before {

    border-left: 1px dashed #b8b9bb;

    bottom: 0px;

    height: 100%;

    top: -26px;

    width: 1px;

}



.tree /deep/ .el-tree-node:after {

    border-top: 1px dashed #b8b9bb;

    height: 20px;

    top: 12px;

    width: 24px;

}



.tree /deep/ .el-tree-node__content {

    padding-left: 0 !important;

}



.el-tree .el-tree-node__expand-icon.expanded {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

}



.el-tree .el-icon-caret-right:before {

    /* background: url("../../../../assets/img/plus.png") no-repeat 0; */

    content: '';

    display: block;

    width: 18px;

    height: 18px;

    font-size: 18px;

    background-size: 18px;

}



.el-tree .el-tree-node__expand-icon.expanded .el-icon-caret-right:before {

    /* background: url("../../../../assets/img/minus.png") no-repeat 0 ; */

    content: '';

    display: block;

    width: 18px;

    height: 18px;

    font-size: 18px;

    background-size: 18px;

}

// hover时

/deep/ .el-tree-node__content {

    &:hover {

        background-color: #2478ff;

    }

}

// 点击展开收起节点时

/deep/ .el-tree-node:focus>.el-tree-node__content {

    background-color: #2478ff;

}

// 选中节点时

/deep/ .el-tree-node.is-current>.el-tree-node__content {

    background-color: #2478ff !important;

}