这个prop绑定的字段如果为0的时候 这行加一个背景样式
<el-table
v-loading="loading"
:data="logList"
:row-class-name="tableRowClassName"
:cell-style="cellStyle"
@selection-change="handleSelectionChange"
>
/**设置表格行颜色**/
tableRowClassName({ row, rowIndex }) {
console.log(row);
if (row.eventstatus == 0) {
return "warning-row";
}
return "";
},
// 下面的表格行边框数据
cellStyle({ row, column, rowIndex, columnIndex }) {
if(row.eventstatus==0){
return "border-color:rgba(196,185,185,0.6)!important;";
}
},
颜色是变了 但是这个函数有一个鼠标悬停的事件 并且这一行数据有一些操作按钮 也有一点bug
这个颜色在scoped这个里面
/* 修改鼠标经过表格的颜色 */
::v-deep.el-table tbody tr:hover > td {
background-color: unset;
}
</style>
//下面的样式不能再scoped
<style>
.el-table .warning-row {
background: rgb(190, 14, 14);
color: rgb(255, 255, 255);
}
.el-table .success-row {
background: white;
}
.el-table tbody tr.el-table__row:hover > td {
background-color: unset;
}
.el-table__body tr.hover-row > td.el-table__cell {
background-color: unset;
}
.el-table__body tr.hover-row > td.el-table__cell {
background-color: unset;
}
不加这个代码 会造出下图bug
另外background-color: unset; 你也可以写和背景样式一样