el-tree设置选中高亮/焦点高亮、选中的节点加深背景,更改字体颜色等

el-tree设置选中高亮/焦点高亮、选中的节点加深背景,更改字体颜色等_第1张图片

el-tree默认的focus样式颜色太浅,有时候电脑亮度低或者换个有色差的屏幕,根本看不出来哪一个节点被选中了。而且只有焦点在el-tree时才有颜色变化,鼠标在别的地方点一下就没了,这样会让用户忘记自己之前选的是哪个节点,很不方便。


第一步:给el-tree组件标签加上属性highlight-current开启高亮

el-tree设置选中高亮/焦点高亮、选中的节点加深背景,更改字体颜色等_第2张图片
加了这个属性,选中的节点的样式才会有highlight-current类,这样接下来才能改变选中的节点的样式。


第二步:在css中修改高亮样式

一个小tip:这里建议是给该页面文件最外层的div加个专有的类,比如我这个页面是“组织配置”,标签就加个class=“organization_configuration”,然后style里的样式全部写在.organization_configuration{}中,这样就不用加scoped了,也更符合vue组件化的开发思路
在这里插入图片描述