在vue中修改el-tree前面的图标以及高亮点击的节点

默认图标：

修改后的图标：

代码：

/*树节点前面的图标修改*/
.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即可
————————————————
版权声明：本文为CSDN博主「做个快乐的小吃货」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43412413/article/details/99442691