快捷導(dǎo)航

el-tree設(shè)置選中高亮/焦點(diǎn)高亮、選中節(jié)點(diǎn)加深背景及更改字體顏色等的方法

更新時(shí)間：2022年12月12日 11:10:37 作者：LangForOne

el-tree默認(rèn)有較淺的背景色,這里業(yè)務(wù)需要,選中節(jié)點(diǎn)的字體高亮,更改顏色,下面這篇文章主要給大家介紹了關(guān)于el-tree選中高亮/焦點(diǎn)高亮、選中節(jié)點(diǎn)加深背景及更改字體顏色等的設(shè)置方法,需要的朋友可以參考下

el-tree默認(rèn)的focus樣式顏色太淺，有時(shí)候電腦亮度低或者換個(gè)有色差的屏幕，根本看不出來哪一個(gè)節(jié)點(diǎn)被選中了。而且只有焦點(diǎn)在el-tree時(shí)才有顏色變化，鼠標(biāo)在別的地方點(diǎn)一下就沒了，這樣會(huì)讓用戶忘記自己之前選的是哪個(gè)節(jié)點(diǎn)，很不方便。

第一步：給el-tree組件標(biāo)簽加上屬性highlight-current開啟高亮

加了這個(gè)屬性，選中的節(jié)點(diǎn)的樣式才會(huì)有highlight-current類，這樣接下來才能改變選中的節(jié)點(diǎn)的樣式。

第二步：在css中修改高亮樣式

一個(gè)小tip：這里建議是給該頁面文件最外層的div加個(gè)專有的類，比如我這個(gè)頁面是“組織配置”，標(biāo)簽就加個(gè)class=“organization_configuration”，然后style里的樣式全部寫在.organization_configuration{}中，這樣就不用加scoped了，也更符合vue組件化的開發(fā)思路

<style lang="less">
.organization_configuration {

  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    // 設(shè)置顏色
    background-color: rgba(135, 206, 235, 0.2); // 透明度為0.2的skyblue，作者比較喜歡的顏色 
    color: #409eff; // 節(jié)點(diǎn)的字體顏色
    font-weight: bold; // 字體加粗
  }

來看一下頁面效果：

如果想要的效果只是點(diǎn)擊時(shí)高亮，失去焦點(diǎn)后變回原樣的樣式，就不用給標(biāo)簽加highlight-current屬性了，直接修改css即可：

  .el-tree-node:focus > .el-tree-node__content {
    background-color: rgba(135, 206, 235, 0.3);
    color: #409eff; //節(jié)點(diǎn)的字體顏色
    font-weight: bold;
  }

指定默認(rèn)高亮樹節(jié)點(diǎn)，參考：點(diǎn)擊鏈接

使用el-tree組件的setCurrentKey方法，根據(jù)樹組件的樹節(jié)點(diǎn)的唯一id來制定某個(gè)樹節(jié)點(diǎn)高亮。當(dāng)然要搭配node-key="id"給樹節(jié)點(diǎn)綁定唯一標(biāo)識id，同時(shí)也要開啟高亮模式（加上highlight-current屬性），然后方式一設(shè)置高亮的顏色樣式要加上。初始化加載默認(rèn)高亮，所以在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  默認(rèn)讓第一項(xiàng)高亮 
        // data是樹組件對應(yīng)的數(shù)據(jù)
        // 通過data中的第一項(xiàng)的id找到對應(yīng)的節(jié)點(diǎn)，然后把這個(gè)節(jié)點(diǎn)設(shè)置為高亮
        this.$refs.myTree.setCurrentKey(this.data[0].id);
      });
    });
  },
};
</script>
<style lang="less" scoped>
// 設(shè)置高亮顏色
/deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #baf !important;
}
</style>

setCurrentKey方法是通過 key 設(shè)置某個(gè)節(jié)點(diǎn)的當(dāng)前選中狀態(tài)，使用此方法必須設(shè)置 node-key 屬性，因?yàn)橐_定唯一性，node-key="id"因?yàn)橐话愣际莍d具有唯一性，所以綁定id。

總結(jié)

到此這篇關(guān)于el-tree設(shè)置選中高亮/焦點(diǎn)高亮、選中節(jié)點(diǎn)加深背景及更改字體顏色等的文章就介紹到這了,更多相關(guān)el-tree選中高亮及選中節(jié)點(diǎn)加深背景內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: