需求描述：
element-plus + el-table 点击行选中并修改背景色+文字颜色
代码实现：
方法一：
重点：文章来源地址https://www.toymoban.com/news/detail-556223.html
- highlight-current-row
<el-table
highlight-current-row
>
/* 选中某行时的背景色*/
.el-table__body tr.current-row > td {
color: #28A458;
background: rgb(197, 213, 255) !important;
}
element-plus 本身有给提供这个功能，而且比第二个方法更好用，第二个方法在有列固定的情况下，样式会不生效，所以建议直接用第一种
方法二：文章来源：https://www.toymoban.com/news/detail-556223.html
重点：
- @row-click
- :row-style
<el-table
:data="detectionTableList"
stripe
style="width: 100%"
height="250"
@row-click="handleSelect"
:row-style="cellStyle"
>
const state = reactive({
checkNumber: "", // 存储选中的
})
// 单击选中一行
const handleSelect = (row: getRecordItem) => {
state.checkNumber = row.checkNumber; // 我这里 checkNumber 是唯一的
};
// 更改选中行背景色
const cellStyle = (row: any) => {
if (state.checkNumber === row.row.checkNumber) { // 注意！！！这里是 row.row.checkNumber
return {
backgroundColor: "rgb(197, 213, 255) !important",
color: "#28A458 !important",
cursor: "pointer",
};
}
return { cursor: "pointer" };
};
到了这里，关于element-plus el-table 点击单行修改背景色的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
