Vue3 + Element Plus 中修改表格当前选中行的颜色

BillKu2025-05-25 1:36

在 Element Plus 中修改表格当前选中行的颜色，可以通过以下步骤实现：

1. 启用当前行高亮

在 el-table 组件上添加 highlight-current-row 属性以启用当前行高亮：

html

复制

下载

运行

复制代码

<el-table highlight-current-row>
  <!-- 表格内容 -->
</el-table>

2. 自定义选中行样式

在 CSS 中覆盖默认的高亮样式（支持全局或局部作用域）：

css

复制

下载

复制代码

/* 修改选中行背景色 */
.el-table__body tr.current-row>td {
  background-color: #f3d8e5 !important; /* 自定义颜色 */
}

/* 可选：修改悬停颜色 */
.el-table__body tr.hover-row>td {
  background-color: #e1f0ff !important;
}

3. 作用域控制（可选）

若需限定样式范围，给表格添加自定义类名：

html

复制

下载

运行

复制代码

<el-table class="custom-table" highlight-current-row>
  <!-- 表格内容 -->
</el-table>

css

复制

下载

复制代码

.custom-table .el-table__body tr.current-row>td {
  background-color: #f3d8e5 !important;
}

完整示例

vue

复制

下载

复制代码

<template>
  <el-table 
    :data="tableData" 
    highlight-current-row 
    class="custom-table"
    @current-change="handleCurrentChange"
  >
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<style scoped>
/* 深度穿透（若使用 scoped） */
:deep(.custom-table .el-table__body tr.current-row>td) {
  background-color: #f3d8e5 !important;
}
/* 悬停效果 */
:deep(.custom-table .el-table__body tr.hover-row>td) {
  background-color: #e1f0ff !important;
}
</style>

说明

!important 用于覆盖默认样式优先级
使用 :deep() 穿透 scoped 样式限制（Vue 3）
颜色值可根据需求替换为十六进制、RGB 或 CSS 变量

如果需要更复杂的效果（如渐变色、边框等），可以继续扩展相关 CSS 属性。