在这里插入图片描述
加了这个属性，选中的节点的样式才会有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。
当元素获得焦点的时候，焦点框为0.比如说当前这个网页，你用tab键切换的时候，文字链接、搜索框、按钮等的外面会有一个虚线框（或高亮框），此时当前的元素就获得了焦点，你可以对它进行操作。这个功能一般是为使用键盘操作的用户准备的。有些链接——比如一个图片链接，你不想让他出现虚线框破坏设计感，就可以用此方法。建议一般不要去掉，只在一些影响设计美感的地方用。毕竟这个焦点框对键盘用户是很有帮助的。一般当前高亮都是后台程序判断实现的，不是css做的，要用css做也行，只是麻烦点，要给每个栏目的<body>加上ID，这样做造成的麻烦是弄后台程序的时候不能把<body>这行直接写入页头包含文件之中：
下面代码每个body都有自己的ID来识别当前是什么栏目，导航栏每个li也加了class：
------------首页html------------
<body id="home">
<div class="menu">
<ul>
<li class="home"><a>首页</a></li>
<li class="about"><a>介绍</a></li>
<li class="news"><a>新闻</a></li>
<li class="job"><a>招聘</a></li>
</ul>
</div>
</body>
------------介绍页html------------
<body id="about">
...
</body>
------------新闻页html------------
<body id="news">
...
</body>
===============
Css code：
===============
/*导航按钮的默认样式*/
.menu li a{color:#000}
/*当前栏目高亮样式*/
#home .menu .home a ,
#about .menu .about a ,
#news .menu .news a ,
#job .menu .job a{color:red}
