如何给eltree组件的子节点增加样式？

szhtest

目前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 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-24 13:29
您这些脚本在哪里执行？

树组件的load事件和postload都不行，可以看一下我上一条的详细回复。这段代码放在node-expand事件中是可以正常高亮的，但我需要在组件显示的时候就高亮节点，node-expand事件是不适用的。

cxy

建议在表单的css中 使用 css选择器对节点记性样式控制。