饿了么UI中el-tree树节点选中高亮的两种常用方式(highlight-current属性)

<style lang="less" scoped>
    /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      // 设置颜色
      background-color: #baf !important;
    }
</style>

<style lang="less" scoped>
    /deep/ .el-tree-node:focus > .el-tree-node__content {
      background-color: #bfa !important;
    }
</style>

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