el-table 选中行字体颜色
时间: 2025-05-03 21:27:40 浏览: 27
### 修改 Element UI 表格组件中选中行的字体颜色
为了在 `el-table` 组件中设置选中行的字体颜色,可以通过自定义 CSS 来实现。具体来说,在 `.el-table__body tr.current-row>td` 类下指定新的字体颜色属性。
```css
<style>
/* 用于设置当前页面element全局table选中某行时的字体颜色 */
.el-table__body tr.current-row > td {
color: #ffffff;
}
</style>
```
上述代码片段展示了如何将选中行的文字颜色更改为白色[^3]。如果希望应用不同的颜色值,则可以替换 `#ffffff` 为所需的十六进制颜色码或其他合法的颜色表示形式。
对于需要更加灵活控制样式的场景,还可以考虑使用 scoped 样式或者借助于 Vue 的动态绑定特性来进一步增强功能性和可维护性。
#### 动态绑定样式示例
当项目中有多个不同主题需求时,推荐利用 JavaScript 变量来进行动态配置:
```html
<template>
<div id="app">
<el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange">
<!-- 列定义 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
selectedColor: '#fff' // 默认选中的文字颜色
};
},
methods: {
handleCurrentChange(currentRow, oldCurrentRow) {
document.querySelectorAll('.el-table__body tr').forEach(tr => {
if (tr.classList.contains('current-row')) {
Array.from(tr.children).forEach(td => td.style.color = this.selectedColor);
}
});
}
}
};
</script>
```
此方法允许开发者根据业务逻辑调整 `selectedColor` 值从而影响最终呈现的效果。
阅读全文
相关推荐


















