el-table row-style自定义选中色
时间: 2025-05-28 07:21:38 浏览: 30
### Element UI el-table 自定义行选中样式
为了自定义 `el-table` 行的选中颜色,可以利用 CSS 的深度选择器来覆盖默认样式。具体来说,在 `<style>` 标签内使用 `>>>` 或 `/deep/` 来穿透 Vue 单文件组件的作用域限制,从而修改 `.el-table__body tr.current-row > td` 类下的样式。
```css
<style>
.el-table >>> .el-table__body tr.current-row > td {
background-color: #f0f9eb !important;
}
</style>
```
上述代码片段展示了如何改变当前选中行 (`current-row`) 的背景色为浅绿色[^2]。需要注意的是,由于样式的优先级问题,通常建议加上 `!important` 关键字以确保新设定的颜色能够生效。
对于更复杂的场景,如果想要根据不同条件应用不同的选中样式,则可以通过配置 `row-class-name` 属性并结合 JavaScript 动态返回类名的方式实现:
```html
<template>
<el-table :data="tableData" @row-click="handleRowClick" :row-class-name="getRowClass">
<!-- 列定义 -->
</el-table>
</template>
<script>
export default {
methods: {
getRowClass({ row }) {
// 基于某些逻辑判断返回特定类名
return 'custom-selected';
},
handleRowClick(row) {
this.$refs.tableRef.toggleRowSelection(row);
}
}
};
</script>
<style scoped>
/* 使用 /deep/ 穿透作用域 */
/deep/.el-table__body tr.custom-selected > td,
/deep/.el-table__body tr:hover > td {
background-color: #eafaff !important; /* 更改鼠标悬停或选定后的背景色 */
}
</style>
```
这段代码不仅实现了点击某一行时自动勾选该行对应的复选框的功能[^4],还允许开发者根据业务需求灵活调整每一行的视觉表现形式。
阅读全文
相关推荐

















