我们知道树节点常常需要选择，为了看得更加直观明显，所以我们需要设置选中的时候，让选中的那个树节点颜色高亮，本文记录一下常用的三种方式，我们先看一下效果图
el-tree组件标签上添加高亮属性 highlight-current ，表示要开启高亮功能。
然后在css中深度作用域高亮样式代码即可
<style lang="less" scoped>
/deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
// 设置颜色
background-color: #baf !important;
}
</style>注意这种方式是选中树节点高亮，即：树节点获取焦点是高亮，如果树节点失去焦点，也就是说点击了别的地方依然是高亮状态，即还保留高亮状态
如果是想要那种，选中高亮，不选中就不高亮的效果，我们单独使用css设置即可，这个时候就不用在树组件上加上highlight-current属性了，直接一句话获取焦点确定即可，如下语句：
<style lang="less" scoped>
/deep/ .el-tree-node:focus > .el-tree-node__content {
background-color: #bfa !important;
}
</style>上述两种方式都是通过css方式去控制的，我们也可以通过js方式去控制的，比如默认第一项高亮
使用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>setCurrentKey方法是通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性，因为要确定唯一性，node-key="id"因为一般都是id具有唯一性，所以绑定id。
