默认图标:

默认

修改后的图标:

修改后

代码:

/*树节点前面的图标修改*/
.el-tree .el-tree-node__expand-icon.expanded
{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before
{
    background: url("../public/img/jia.png") no-repeat center center;
    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("../public/img/jian.png") no-repeat center center;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
}
.el-tree-node__expand-icon.is-leaf::before
{
    display: none;
}

el-tree点击节点后,高亮当前点击节点的样式修改以及树节点hover时的样式修改:

需要给el-tree加上highlight-current属性
代码:

/*高亮当前选中的树节点*/
.el-tree-node.is-current > .el-tree-node__content {
    background-color: #384959;
}
/*树节点点击时的样式设置*/
.el-tree-node:focus > .el-tree-node__content {
    background-color: #384959;
}
/*树节点hover时的样式设置*/
.el-tree-node__content:hover {
    background-color: #384959;
}

设置el-tree点击前面的图标时展开和收缩子节点,点击内容时不进行展开和收缩

:expand-on-click-node="false",//设为false即可

 

Logo

前往低代码交流专区

更多推荐