为什么el-tree模块使用深色没收后通过单击节点和单击左侧三角形产生的效果不同？

Question

为什么Element plus的Tree模块（el-tree）使用深色模式（添加了highlight-current属性）后，修改相应CSS如下：

.el-tree {
    background-color: transparent;
    color: white;
  }
:deep(.el-tree-node.is-current > .el-tree-node__content) {
    background-color: #f90606; /* 背景色 */
    color: #d1fa05; /* 文字颜色 */
  }
  :deep(.el-tree-node__content:hover) {
    background-color: white; /* 悬停背景色 */
    color: #000;
  }

结果在单击父节点名称展开子节点时，父节点的颜色有按CSS设置的颜色变化，但是通过父节点左边的三角形展开子节点时，却还是默认的颜色，导致颜色看不清楚。效果如下：
这是通过点击父节点左边的三角形展开子节点，发现鼠标移走后，父节点的CSS没有使用:deep(.el-tree-node.is-current > .el-tree-node__content)所设置的颜色：

这是通过点击父节点名称展开子节点，发现鼠标移走后，父节点的CSS按照:deep(.el-tree-node.is-current > .el-tree-node__content)所设置的颜色正常改变：

Answer 1

让【宝码香车】来帮您解答，本回答参考DeepSeek编写，并整理提供。

如果答案让您满意，请采纳、点赞、关注，非常感谢！
.
每日一句正能量，让它带给您好心情：别害怕孤独，它会让你更清楚地认识自己。
.

Element Plus Tree 组件深色模式节点选中问题分析

根据您描述的问题，这是 Element Plus Tree 组件在深色模式下 CSS 选择器优先级和节点状态管理的问题。

问题原因

当您点击父节点名称时，该节点会被同时标记为 is-current 和展开状态。但当您点击左侧三角形图标时，只有展开状态发生变化，而 is-current 状态可能没有正确更新。

解决方案

方案1：增强 CSS 选择器

.el-tree {
  background-color: transparent;
  color: white;
}


/* 增强选择器，覆盖更多情况 */
:deep(.el-tree-node.is-current > .el-tree-node__content),
:deep(.el-tree-node:focus > .el-tree-node__content) {
  background-color: #f90606;
  color: #d1fa05;
}


:deep(.el-tree-node__content:hover) {
  background-color: white;
  color: #000;
}


/* 确保展开状态下的当前节点也应用样式 */
:deep(.el-tree-node.is-current.is-expanded > .el-tree-node__content) {
  background-color: #f90606;
  color: #d1fa05;
}

方案2：使用更通用的选择器

.el-tree {
  background-color: transparent;
  color: white;
}


/* 使用更通用的选择器 */
:deep(.el-tree-node.is-current .el-tree-node__content) {
  background-color: #f90606;
  color: #d1fa05;
}


:deep(.el-tree-node__content:hover) {
  background-color: white;
  color: #000;
}

方案3：JavaScript 解决方案

如果 CSS 方案无法完全解决问题，可以考虑使用 JavaScript 确保点击三角形时也更新当前节点：

// 在您的组件中
const handleNodeClick = (data, node) => {
  // 确保节点被设置为当前节点
  node.isCurrent = true;
}


// 在模板中
<el-tree
  :data="treeData"
  :highlight-current="true"
  @node-click="handleNodeClick"
  @node-expand="handleNodeClick" // 监听展开事件
/>

推荐做法

建议同时使用方案1的增强 CSS 选择器和方案3的 JavaScript 监听，这样可以确保在各种交互情况下都能正确应用样式。

这个问题的根本原因是 Element Plus Tree 组件在不同交互方式下对节点状态的更新逻辑不一致，通过上述方案可以很好地解决这个问题。