Element UI Tree 组件节点点击颜色变化：实现选中节点字体变红

在使用 Element UI Tree 组件时，我们可能需要在用户点击节点时改变选中节点的字体颜色，以突出显示选中的节点。

本文将介绍如何实现这一功能，并提供详细的步骤和代码示例。

实现步骤

在点击事件处理函数 handleClick 中，获取点击的节点，并将其字体颜色改成红色。
在 handleClick 函数中添加以下代码：

function handleClick(ev) {
    console.log('ev', ev);
    console.log('ev.categoryId 点击的这个类目id是----', ev.categoryId);
    loading.value = true;
    queryParams2.categoryId = ev.categoryId;
    getSpecsPage(queryParams2)
        .then((data: any) => {
            SpecsList.value = data.rows;
            total.value = data.total; //页
        })
        .finally(() => {
            loading.value = false;
        });

    // 获取所有节点
    const nodes = document.getElementsByClassName('el-tree-node');

    // 移除所有节点的选中样式
    for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.remove('selected-node');
    }

    // 将点击的节点添加选中样式
    ev.target.parentNode.classList.add('selected-node');
}

在 CSS 中定义 .selected-node 样式类，将字体颜色改为红色：

.selected-node {
    color: red;
}

在模板中的 el-tree 组件上添加 class-name 属性，将其值设置为 'custom-tree'，以便应用样式类：

<el-tree class-name='custom-tree' :data='treeData' :props='defaultProps' node-key='categoryId' default-expand-all
    @node-click='handleClick' />

在样式中添加 .custom-tree 样式类，并设置其字体颜色为黑色：

.custom-tree {
    color: black;
}

代码示例

JavaScript 代码：

function handleClick(ev) {
    // ... 其他代码 ...

    // 获取所有节点
    const nodes = document.getElementsByClassName('el-tree-node');

    // 移除所有节点的选中样式
    for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.remove('selected-node');
    }

    // 将点击的节点添加选中样式
    ev.target.parentNode.classList.add('selected-node');
}

CSS 代码：

.selected-node {
    color: red;
}

.custom-tree {
    color: black;
}

模板代码：

<el-tree class-name='custom-tree' :data='treeData' :props='defaultProps' node-key='categoryId' default-expand-all
    @node-click='handleClick' />

总结

通过以上步骤，我们成功实现了在点击 Element UI Tree 组件节点时将选中节点的字体颜色改为红色的功能。这可以有效地突出显示用户选择的节点，增强用户体验。

希望本文能够帮助您更好地使用 Element UI Tree 组件，并实现您所需的个性化功能。