如何在Element Plus的el-table中取消行hover时的高亮效果？

Question

在使用Element Plus的`el-table`组件时，如何取消行hover时的默认高亮效果是一个常见的技术问题。默认情况下，当鼠标悬停在表格行上时，`el-table`会自动应用背景色高亮样式。若想移除该效果，可以通过自定义CSS覆盖默认样式实现。 具体方法是：定位`.el-table--enable-row-hover .el-table__body tr:hover>td`样式，并将其`background-color`属性设置为`transparent`或所需颜色。例如： ```css .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: transparent !important; } ``` 此外，也可以通过设置`el-table`的`highlight-current-row`属性为`false`来确保当前行不被额外强调（尽管这与hover高亮不同）。此方法简单高效，适用于需要保持表格简洁视觉风格的场景。

Answer 1

1. 问题概述

在使用Element Plus的`el-table`组件时，开发者常常会遇到一个需求：取消鼠标悬停在表格行上时的默认高亮效果。这种高亮效果是由框架自动应用的样式导致的，默认情况下，当用户将鼠标移动到某一行时，该行的背景颜色会发生变化。

为了解决这一问题，我们需要深入了解`el-table`组件的工作机制以及其默认样式的实现方式。接下来，我们将从技术分析和解决方案两个角度逐步探讨如何移除这一效果。

2. 技术分析

1. Element Plus 的 `el-table` 组件内置了 `.el-table--enable-row-hover` 类名，用于控制行 hover 高亮的行为。
2. 具体来说，`.el-table--enable-row-hover .el-table__body tr:hover > td` 是定义 hover 高亮样式的 CSS 选择器。
3. 通过覆盖此选择器的样式，可以自定义或完全移除 hover 高亮效果。

例如，以下代码片段展示了如何通过 CSS 覆盖默认样式：

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
}
  

此外，还可以通过设置 `highlight-current-row` 属性为 `false` 来避免当前行被额外强调，尽管这与 hover 高亮行为无关，但有助于整体视觉风格的一致性。

3. 解决方案

方法	描述	适用场景
CSS 覆盖	通过自定义 CSS 覆盖 `.el-table--enable-row-hover .el-table__body tr:hover > td` 样式。	需要完全移除 hover 高亮效果时。
`highlight-current-row` 属性	将 `highlight-current-row` 设置为 `false`，避免当前行被额外强调。	需要保持简洁视觉风格，但不涉及 hover 高亮时。

以下是完整的 HTML 和 CSS 示例代码：

<template>
  <el-table :data="tableData" highlight-current-row="false">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<style scoped>
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
}
</style>
  

4. 实现流程图

为了更清晰地展示实现步骤，我们可以通过流程图来表示整个过程：

sequenceDiagram
    participant Developer as 开发者
    participant TableComponent as 表格组件
    participant StyleSheet as 样式表
    Developer->>TableComponent: 使用 el-table 组件
    TableComponent->>StyleSheet: 应用默认 hover 样式
    Developer->>StyleSheet: 覆盖 hover 样式
    StyleSheet-->>TableComponent: 更新样式生效

通过上述流程图可以看出，开发者需要对默认样式进行干预以满足特定需求。