vue element ui - el-tree 树形控件点击节点变颜色

说明

官网:
https://element.eleme.cn/#/zh-CN/component/tree

提出问题

官方提供的树,点击节点时,颜色太浅,看不清楚当前点击哪个节点

分析

通过修改样式,改变点击节点的颜色

解决方式一

如果是想要选中高亮,不选中就不高亮的效果,我们单独使用css设置即可:

注意:要加上 scoped

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

          color: #66b1ff !important;
        }
</style>

解决方式二

第一步

启用高亮:

:highlight-current="true"

第二步

加下面样式:

注意:要加上 scoped

<style scoped>
    /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {

          color: #66b1ff !important;
        }
</style>

这里需要用到深度选择器,详见:

https://www.malaoshi.top/show_1IX8TQ0htAyX.html

参考:
https://segmentfault.com/a/1190000040533870


原文出处:/show_1IX8cfFt7Btm.html