el-tree 修改每个层级的背景色

目录

一、思路

二、代码

1. HTML部分

2. js部分

3. css部分

方法二：通过判断node.level

---

案例图

一、思路

1. 使用 render-content 插槽来自定义节点内容。
2. 根据节点的层级动态添加 CSS 类。
3. 写一个方法，用于：递归地获取节点的层级。如果节点没有父节点，则返回当前层级；否则，递归调用并增加层级

还有另外一种方法，可以通过判断node.level 判断级别从而动态配置（这种方法更便捷）。

二、代码

1. HTML部分

<el-tree
          :data="treeData"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
          highlight-current
          node-key="id"
          @node-click="handleNodeClick"
          :props="defaultProps"
          :current-node-key="nodeKey"
          @check-change="handleCheckChange"
          :render-content="renderContent"
        >
        </el-tree>

2. js部分

data(){
return {
 selectTreeData: 10, //获取选中数据的ID
}
}
method：{
   //树形选择，点击选中数据，
    handleNodeClick(val, node) {
      this.selectTreeData = val.id;
    },
    getLevel(node, level = 1) {
      if (!node.parent) {
        return level;
      } else {
        return this.getLevel(node.parent, level + 1);
      }
    },
    /**
     * 动态添加每个层级的类名
     */
    renderContent(h, { node, data, store }) {
      const level = PublicFunction.getLevel(node);
      const isSelected = this.selectTreeData === data.id; // 检查当前节点是否被选中
      const customClass = `tree-node-level-${level} ${
        isSelected ? "selected-node" : ""
      }`;
      return h("span", { class: customClass }, [h("span", null, [data.label])]);
    },
    //#endregion
}

3. css部分

/* 2024-10-10 14. 树结构 每个层级的背景色*/
.tree-node-level-1,
.tree-node-level-2,
.tree-node-level-3 {
  background-color: #e0ecfa;
}

.tree-node-level-4 {
  background-color: #fff;
} 

/* 2024-10-10 14. 树结构 每个层级选中后的背景色*/
.selected-node>span {
  background-color: #2a94de;
  display: inline-block;
}

/* 2024-10-10 14. 树结构 同上*/
.tree-node-level-3:hover,
.tree-node-level-3:active {
  background-color: #2a94de;
  display: inline-block;
}

/*
* 5. 树 鼠标悬浮时的背景色
*/
.el-tree-node__content:hover {
  /* background-color: #a3cbfd !important; 2024-10-9 屏蔽，添加下面代码*/
  background-color: #2a94de !important;
  color: #fff;
}

/* // 2024-10-9
* 处理树默认选中的背景色
*/
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #2a94de !important;
  color: #fff;
}

ps:

如果样式仅用于当前页面，需要加::v-deep ；

如果样式适用于全局，则样式文件在main.js 中引入，且不需要添加::v-deep。

方法二：通过判断node.level

<el-tree
          :data="treeData"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
          highlight-current
          node-key="ID"
          @node-click="handleNodeClick"
          :props="defaultProps"
          :current-node-key="nodeKey"
          @check-change="handleCheckChange"
        >
          <template #default="{ node }">
            <span class="custom-tree-node">
              <span class="lableStyle1"  v-if="node.level == 1">
                <img
                  src="../../../../assets/bj_28_img/dengjiTreeIcon.png"
                  alt=""
                  style="width: 1rem; height: 1rem"
                  v-if="node.level == 1"
                />
                <el-icon v-else><Management /></el-icon>
                {{ node.label }}
              </span>
              <span class="lableStyle2"  v-else-if="node.level == 2">
                <el-icon ><Management /></el-icon>
                {{ node.label }}
              </span>
            </span></template>
        </el-tree>

下面可不看...

记录将方法写在公共组件vuePublic.js中，单页面引用

1. vuePublic.js

import router from "@/router";

const PublicFunction = {
  //#region  用于动态修改el-tree 每个层级的背景色
  getLevel(node, level = 1) {
    if (!node.parent) {
      return level;
    } else {
      return this.getLevel(node.parent, level + 1);
    }
  },
  renderContent(h, { node, data, store },selectTreeData) {
    const level = this.getLevel(node);
    const isSelected = selectTreeData === data.id; // 检查当前节点是否被选中
    const customClass = `tree-node-level-${level} ${
      isSelected ? "selected-node" : ""
    }`;
    return h("span", { class: customClass }, [h("span", null, [data.label])]);
  },
  //#endregion


};
export { PublicFunction };

2. 页面引用：

html部分同上。

import { PublicFunction } from "@/utils/vuePublic";
method：{
 /**
     * 修改每个层级的背景色
     */
    renderContent(h, { node, data, store }) {
      return PublicFunction.renderContent(
        h,
        { node, data, store },
        this.selectTreeData
      );
    },
}