如何给eltree组件的子节点增加样式？
目前eltree组件是用脚本写入选项，但是我用// 在组件加载完成后执行高亮操作
document.getElementById('eltree').addEventListener('load', function() {
highlightNodeByName('选项节点的名称');
});
// 递归遍历树节点，并根据名称高亮
function highlightNodeByName(nodeName) {
const rootNodes = document.querySelectorAll('.el-tree-node'); // 获取所有的根节点
rootNodes.forEach(node => traverseAndHighlight(node, nodeName));
}
// 递归遍历每个节点，查找匹配的节点名称并高亮
function traverseAndHighlight(node, nodeName) {
const label = node.querySelector('.el-tree-node__label'); // 查找当前节点的标签
if (label && label.innerText.trim() === nodeName.trim()) {
// 如果找到匹配的节点名称，则高亮该节点的内容部分
const content = node.querySelector('.el-tree-node__content');
if (content) content.style.backgroundColor = 'yellow';
} else {
// 否则，清除背景色
const content = node.querySelector('.el-tree-node__content');
if (content) content.style.backgroundColor = '';
}
// 查找并遍历该节点的子节点
const childNodes = node.querySelectorAll(':scope > .el-tree-node__children > .el-tree-node');
childNodes.forEach(childNode => traverseAndHighlight(childNode, nodeName));
}
rootNodes.forEach无法获取到除根节点之外的子节点，没法给子节点添加样式，请问要如何解决呢？子节点是查询值，所以无法用vue slots
首先您是怎么给树添加的节点，截图看看，另外，下面这段代码里不要使用document.querySelectorAll
使用this.form.get("eltree").node.querySelectorAll，再F12看看，子节点里是否有el-tree-node
// 递归遍历树节点，并根据名称高亮
function highlightNodeByName(nodeName) {
const rootNodes = document.querySelectorAll('.el-tree-node'); // 获取所有的根节点
rootNodes.forEach(node => traverseAndHighlight(node, nodeName));
} 本帖最后由 szhtest 于 2024-10-23 16:15 编辑
论坛管理员 发表于 2024-10-23 13:26
首先您是怎么给树添加的节点，截图看看，另外，下面这段代码里不要使用document.querySelectorAll
使用this ...
图片是我树组件的数据——脚本。
document.querySelectorAll和this.form.get("eltree").node.querySelectorAll我看打印出来的内容应该是一样的
this.form.get("eltree").node也只能获取到根节点，我this.form.get("eltree").node.innertext或者innerhtml打印出来的也只有根节点的数据。
eltree组件我是设置默认展开子节点的，而且我增加样式的代码是在组件的load或者postload事件写的，不知道为什么都拿不到子节点。在node-expand点击节点展开事件中就能拿到完整的innerhtml了，可是加载的时候并不会主动触发这个事件。
我的需求是要通过选中的节点名称去高亮节点，该怎么解决呢，并且需要在哪个事件写？
您这些脚本在哪里执行？ 本帖最后由 szhtest 于 2024-10-25 11:04 编辑
论坛管理员 发表于 2024-10-24 13:29
您这些脚本在哪里执行？
树组件的load事件和postload都不行，可以看一下我上一条的详细回复。这段代码放在node-expand事件中是可以正常高亮的，但我需要在组件显示的时候就高亮节点，node-expand事件是不适用的。 建议在表单的css中 使用 css选择器对节点记性样式控制。
页:
[1]