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

在 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 属性。

相关推荐
南岸月明几秒前
为什么你拼命做副业,却还是赚不到钱?
前端
帅夫帅夫3 分钟前
你真的知道怎么用CSS吗?
前端
蓝胖子的小叮当9 分钟前
JavaScript基础(十)对象方法总结
前端·javascript
艾小码42 分钟前
AI时代,编程简化:前端开发的范式革命
前端
讨厌吃蛋黄酥42 分钟前
🔥 揭秘React魔法:从JSX到表单组件的性能与交互之争!
前端·javascript·react.js
沫小北43 分钟前
HarmonyOS Lottie动画库总结
前端·harmonyos
Oriel1 小时前
在 Strapi v4 中生成专业 API 文档
前端·后端
WildBlue1 小时前
解锁 Babel - JSX 编译:前端魔法背后的秘密🥳
前端·react.js
南方kenny1 小时前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js
LaoZhangAI1 小时前
Playwright MCP完整指南:AI驱动的浏览器自动化测试革命2025
前端·后端