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

目录

一、思路

二、代码

1. HTML部分

2. js部分

3. css部分

---

案例图

一、思路

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

二、代码

1. HTML部分

<el-tree:data="treeData"default-expand-all:filter-node-method="filterNode"ref="tree"highlight-currentnode-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。

下面可不看...

记录将方法写在公共组件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);},
}