el-table去除hover变色
时间: 2025-01-10 07:26:19 浏览: 64
### 取消 `el-table` 的 Hover 变色效果
为了取消 `el-table` 中的 hover 变色效果,可以通过自定义 CSS 来覆盖默认样式。以下是几种实现方法:
#### 方法一:通过全局样式修改
可以在项目的全局样式文件中添加如下代码来禁用 hover 效果:
```css
.el-table__body .el-table__row.hover-row td {
background-color: #fff !important;
}
```
这种方法适用于整个项目中的所有表格[^1]。
#### 方法二:局部作用域内的样式调整
如果只想影响特定页面上的表格,则可以采用带有 `scoped` 属性的方式,在组件内部编写更精确的选择器:
```html
<template>
<div>
<el-table>...</el-table>
</div>
</template>
<style scoped>
/* 使用 :deep() 或 ::v-deep 处理深层嵌套 */
:deep(.el-table__body tr.hover-row > td.el-table__cell) {
background-color: transparent !important;
}
</style>
```
此方式仅对该组件生效,并且不会干扰到其他地方使用的相同类名[^2]。
#### 方法三:针对最新版本的 Element Plus (Vue3)
对于使用 Vue3 和 Element Plus 的开发者来说,推荐的做法是利用 `::v-deep` 宏指令来进行深层次的选择器穿透操作:
```css
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: unset !important;
}
```
这能够有效地阻止当鼠标悬浮于行上时触发的颜色变化行为[^3]。
以上三种方案都可以达到取消 `el-table` hover 变色的效果,具体选择哪一种取决于实际应用场景和个人偏好。
阅读全文
相关推荐

















