在这里插入图片描述
加了这个属性，选中的节点的样式才会有highlight-current类，这样接下来才能改变选中的节点的样式。
第二步：在css中修改高亮样式
一个小tip：这里建议是给该页面文件最外层的div加个专有的类，比如我这个页面是“组织配置”，标签就加个class=“organization_configuration”，然后style里的样式全部写在.organization_configuration{}中，这样就不用加scoped了，也更符合vue组件化的开发思路
在这里插入图片描述
<style lang="less">
.organization_configuration {
.el-tree--highlight-current
.el-tree-node.is-current
>.el-tree-node__content {
// 设置颜色
background-color: rgba(135, 206, 235, 0.2)// 透明度为0.2的skyblue，作者比较喜欢的颜色
color: #409eff// 节点的字体颜色
font-weight: bold// 字体加粗
}
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
来看一下页面效果：
在这里插入图片描述
如果想要的效果只是点击时高亮，失去焦点后变回原样的样式，就不用给标签加highlight-current属性了，直接修改css即可：
.el-tree-node:focus >.el-tree-node__content {
background-color: rgba(135, 206, 235, 0.3)
color: #409eff//节点的字体颜色
font-weight: bold
}
1
2
3
4
5
1
2
3
4
5
指定默认高亮树节点，参考：点击链接
使用el-tree组件的setCurrentKey方法，根据树组件的树节点的唯一id来制定某个树节点高亮。当然要搭配node-key="id"给树节点绑定唯一标识id，同时也要开启高亮模式（加上highlight-current属性），然后方式一设置高亮的颜色样式要加上。初始化加载默认高亮，所以在mounted钩子中书写代码即可。
完整代码：
<template>
<div class="box">
<el-tree
ref="myTree"
node-key="id"
:data="data"
:props="defaultProps"
highlight-current
>
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
name: "西游记",
id: "xiyouji",
children: [
{
name: "孙悟空",
id: "sunwukong",
children: [
{
name: "大猴子",
id: "dahouzi",
children: [],
},
{
name: "二猴子",
id: "erhouzi",
children: [],
},
],
},
{
name: "猪八戒",
id: "zhubajie",
children: [],
},
{
name: "沙和尚",
id: "shaheshang",
children: [],
},
],
},
{
name: "水浒传",
id: "shuihuzhuan",
children: [
{
name: "宋江",
id: "songjiang",
children: [],
},
{
name: "武松",
id: "wusong",
children: [],
},
],
},
],
defaultProps: {
children: "children",
label: "name",
},
}
},
mounted() {
this.$nextTick(function () {
this.$nextTick(() =>{
// myTree 数组件的ref 默认让第一项高亮
// data是树组件对应的数据
// 通过data中的第一项的id找到对应的节点，然后把这个节点设置为高亮
this.$refs.myTree.setCurrentKey(this.data[0].id)
})
})
},
}
</script>
<style lang="less" scoped>
// 设置高亮颜色
/deep/ .el-tree--highlight-current .el-tree-node.is-current >.el-tree-node__content {
background-color: #baf !important
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
setCurrentKey方法是通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性，因为要确定唯一性，node-key="id"因为一般都是id具有唯一性，所以绑定id。
最近新做的项目，有用到Element-UI tree 组件，需求是选中的节点背景颜色改变（默认的太浅了），并且要求不切换的情况下一直保持高亮 由于项目的树比较多，我写了两种 1.点击后高亮显示的背景颜色修改（但是不能一直保持不变） .el-tree-node:focus >.el-tree-node__content { background-color: rgb(158, 213, 250) !important } 这个只要改变css就可以达到效果 2.点击后显示高亮的效果，并且不切换的情况下高亮一直保持 css: .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{ background-color: rgb(158, 213, 250) !important } js: node-key="id"表示使用每个节点的"id"对应的值来表示每个节点 highlight-current"表示高亮选中的节点 这样就能让点击选中的节点保持高亮，在不切换的情况下一直高亮对于快速定位，个人的经验处理一般如下：1、检查页面的标签是否闭合不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。2、样式排除法有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。3、模块确认法有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。4、检查是否清除浮动其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hiddenzoom:1 的类似方法来清除浮动，会有太多的限制性）。5、检查 IE 下是否触发 haslayout很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读 蓝色上的转帖 ）快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。6、边框背景调试法故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^最后想强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。
