当前位置：首页 > news >正文

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

news 2025/7/13 13:56:57

在 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>