vue3 + element-plus 修改 el-table 鼠标悬停背景、斑马纹颜色、表头颜色

本文介绍了如何修改ElementPlus中的表格样式,包括调整鼠标悬停时的背景色、实现斑马纹效果以及改变表头颜色,通过CSS变量和Vue组件方法实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天需要修改一下element-plus(版本为:^2.9.9)表格的样式,发现多多少少存在问题。(第二行为悬停样式)

一、修改鼠标悬停样式。

在自定义 Element Plus 表格的悬停样式时,很多都会第一时间尝试覆盖 .el-table__row:hover:

::v-deep .el-table__row:hover {
     background: rgba(14, 95, 255, 0.5) !important;
}

乍一看似乎可以控制表格行的背景色,但实际运行后你可能会发现一种奇怪的现象:鼠标悬停某一行时背景会一闪一闪的,不稳定,甚至还会出现跳色或恢复原样的问题。

为什么会这样?

Element Plus 并没有直接给 .el-table__row:hover 添加背景色,而是通过如下样式控制:

.el-table__body tr:hover > td.el-table__cell { 
    background-color: var(--el-table-row-hover-bg-color); 
}

也就是说,Element Plus 的 hover 效果是作用在 <td> 上,而不是 <tr> 本身。这也意味着:

✅ 正确的选择器应该是 tr:hover > td,而不是 tr:hover

所以,如果你想正确地覆盖表格悬停样式,推荐的写法是:

::v-deep(.el-table__body tr:hover > td) {
  background-color: rgba(14, 95, 255, 0.5) !important;
}

或者通过控制器拾取表格,可以查看到.el-table元素,对指定样式进行修改即可(部分会因其它因素干扰而导致效果不显示,需排查)。

.el-table {
    // 表格边框的颜色,可以通过这个变量来设置表格的边框颜色。
    --el-table-border-color: var(--el-border-color-lighter);
    // 表格边框的样式,一般为实线或虚线,可以通过这个变量来设置表格的边框样式。
    --el-table-border: 1px solid var(--el-table-border-color);
    // 表格中文字的颜色,可以通过这个变量来设置表格中文字的颜色。
    --el-table-text-color: var(--el-text-color-regular);
    // 表头中文字的颜色,可以通过这个变量来设置表头中文字的颜色。
    --el-table-header-text-color: var(--el-text-color-secondary);
    // 鼠标悬停在行上时的背景色,可以通过这个变量来设置鼠标悬停时行的背景色。
    --el-table-row-hover-bg-color: var(--el-fill-color-light);
    // 当前行的背景色,可以通过这个变量来设置当前行的背景色。
    --el-table-current-row-bg-color: var(--el-fill-color-light);
    // 表头的背景色,可以通过这个变量来设置表头的背景色。
    --el-table-header-bg-color: var(--el-bg-color);
    // 固定列的阴影样式,可以通过这个变量来设置固定列的阴影样式。
    --el-table-fixed-box-shadow: var(--el-box-shadow-light);
    // 表格的背景色,可以通过这个变量来设置表格的背景色。
    --el-table-bg-color: var(--el-fill-color-blank);
    // 表格行的背景色,可以通过这个变量来设置表格行的背景色。
    --el-table-tr-bg-color: var(--el-fill-color-blank);
    // 展开行的背景色,可以通过这个变量来设置展开行的背景色。
    --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
    // 左侧固定列的阴影样式,可以通过这个变量来设置左侧固定列的阴影样式。
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    // 右侧固定列的阴影样式,可以通过这个变量来设置右侧固定列的阴影样式。
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}

修改鼠标悬停样式为 --el-table-row-hover-bg-color

.el-table {
    --el-table-row-hover-bg-color: rgba(14, 95, 255, 0.5);
}

二、修改斑马纹颜色

Element Plus 默认启用了斑马纹(striped)功能,用于提升表格可读性。不过其默认配色通常比较浅,很多时候无法满足 UI 视觉需求。因此我们可以自定义斑马纹的颜色。

方法一:通过 row-style 自定义每行背景色

Element Plus 提供了 row-style 回调函数,可以根据行索引返回样式对象,从而实现定制化的斑马纹:

<template>
    <div>
        <el-table :data="tableData" style="width: 100%" :row-style="tableRowStyle">
            <el-table-column label="序号" type="index" align="center" />
            <el-table-column label="test1" prop="test" align="center" />
            <el-table-column label="test2" prop="test2" align="center" />
            <el-table-column label="test3" prop="test3" align="center" />
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([]);

const tableRowStyle = (row) => {
    return row.rowIndex % 2 === 0 ? 
        { background: 'rgba(14, 95, 255, 0.05)' } : 
        { background: 'rgba(14, 95, 255, 0.15)' };
};
</script>

该方法最大的优势是:不依赖样式穿透,兼容性强、直观灵活,可以结合不同业务场景为每一行设置背景色。


方法二:通过 CSS 样式强行覆盖

如果你想使用全局样式方式来统一设置斑马纹,也可以通过 CSS 选择器直接覆盖:

<style scoped>
::v-deep(.el-table__body tr:nth-child(even) > td) {
  background-color: rgba(14, 95, 255, 0.05);
}
::v-deep(.el-table__body tr:nth-child(odd) > td) {
  background-color: rgba(14, 95, 255, 0.15);
}
</style>

row-style 不同,这种方式依赖于 CSS 的结构匹配,因此在使用 scoped 样式时需要加 ::v-deep 进行样式穿透。

三、修改表头颜色

<template>
    <div>
        <el-table :data="tableData" style="width: 100%" 
            :header-cell-style="tableHeaderColor">
            <el-table-column label="序号" type="index" align="center" />
            <el-table-column label="test1" prop="test" align="center" />
            <el-table-column label="test2" prop="test2" align="center" />
            <el-table-column label="test3" prop="test3" align="center" />
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([]);

// 样式调整
const tableHeaderColor = {
    background: '#E1EAF3 !important',
    color: '#333333',
    fontSize: '14px',
    textAlign: 'center',
}
</script>

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值