餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)

更新時間：2022年12月12日 11:09:49 作者：水冗水孚

最近新做的項目有用到Element-UI tree組件,下面這篇文章主要給大家介紹了關于餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

問題描述

我們知道樹節(jié)點常常需要選擇，為了看得更加直觀明顯，所以我們需要設置選中的時候，讓選中的那個樹節(jié)點顏色高亮，本文記錄一下常用的三種方式，我們先看一下效果圖

效果圖

方式一

第一步：

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>

注意這種方式是選中樹節(jié)點高亮，即：樹節(jié)點獲取焦點是高亮，如果樹節(jié)點失去焦點，也就是說點擊了別的地方依然是高亮狀態(tài)，即還保留高亮狀態(tài)

方式二

如果是想要那種，選中高亮，不選中就不高亮的效果，我們單獨使用css設置即可，這個時候就不用在樹組件上加上highlight-current屬性了，直接一句話獲取焦點確定即可，如下語句：

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

上述兩種方式都是通過css方式去控制的，我們也可以通過js方式去控制的，比如默認第一項高亮

指定默認高亮樹節(jié)點

使用el-tree組件的setCurrentKey方法，根據(jù)樹組件的樹節(jié)點的唯一id來制定某個樹節(jié)點高亮。當然要搭配node-key="id"給樹節(jié)點綁定唯一標識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 數(shù)組件的ref  默認讓第一項高亮 
        // data是樹組件對應的數(shù)據(jù)
        // 通過data中的第一項的id找到對應的節(jié)點，然后把這個節(jié)點設置為高亮
        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>