app开发定制el-tree设置选中高亮/焦点高亮、选中的节点加深背景，更改字体颜色等

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

---

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

加了这个属性，选中的节点的样式才会有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

来看一下页面效果：

---

如果想要的效果只是点击时高亮，后变回原样的样式，就不用给标签加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

---

指定默认高亮树节点，参考：

使用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

setCurrentKey方法是通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性，因为要确定唯一性，node-key="id"因为一般都是id具有唯一性，所以绑定id。

---

THX~