<el-table
ref="multipleTable"
v-loading="loading"
:data="orderList"
:row-class-name="tableRowClassName"
>
row-class-name
行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className
tableRowClassName({ row, rowIndex }) {
// console.log(row);
if (row.isRemind == 2) {
return "warning-row";
} else if (row.isRemind == 3) {
return "success-row";
} else if (row.isRemind == 4) {
return "red-row";
} else if (row.isRemind == 5) {
return "yellow-row";
} else if (row.isRemind == 1) {
return "green-row";
} else if (row.isRemind == 0) {
return "yellow-row";
}
return "";
},
根据每行的值,添加不同的类名,根据类名,添加不同样式
::v-deep .el-table .warning-row {
background: rgb(226, 211, 179);
// color:red;
}
::v-deep .el-table .success-row {
background: pink;
// color:green;
}
/* 红 */
::v-deep .el-table .red-row {
background: #f30d0d4f;
color: black;
}
/* 绿 */
::v-deep .el-table .green-row {
background: #9cd87cd8;
// color:green;
}
/* 黄 */
::v-deep .el-table .yellow-row {
background: #f7f32b9d;
color: black;
}
排序
// 排序
sortreceiveTime(column, prop, order) {
// console.log(column.order);
// return
if (column.order != null) {
this.queryParams.collation = column.order;
} else {
this.queryParams.collation = descending;
}
this.getList();
//ascending 升序
//descending 降序
//
},