el-table表格根据不同内容渲染不同背景颜色

1. 根据不同的状态,为了方便区分,给单元格渲染出不同的背景颜色
2. 效果图:
   
   
   因为后台返回数据的原因,暂时只能看到这样的效果

3.代码

:cell-class-name=“cellClassName”//在表格中加入这一行代码，为 Table 中的单元格添加 class，表明该行处于某种状态

<el-table
          ref="crud"
          class="check-all-hide"
          :data="recordList"
          border
          @selection-change="selectionChange"
          @row-click="handleRowClick"
          style="width: 100%"
          :max-height="mainHeight - 300"
          :cell-class-name="cellClassName"   
        >
        </el-table>

//如果状态少,可以直接写if判断, 通过 rowIndex, columnIndex 可判断处于哪一行哪一列,index从0开始,也可以通过属性值判断,return出来的就是设置的class类名

cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.label == "上班打卡时间" || column.label == "下班打卡时间") {
        switch (row.userStartTime || row.userEndTime) {
          case "补卡":
            return "Card";
            break;
          case "缺卡":
            return "absenteeism";
            break;
          case "迟到" || "早退":
            return "late";
            break;
          case "请假":
            return "leave";
            break;
          case "外出":
            return "out";
            break;
        }
      }
    }

//样式文件
/deep/.Card {
 background-color:rgba($color:  #92d050, $alpha:0.7);
}
/deep/.absenteeism {
  background-color: rgba($color: #00b0f0, $alpha: 0.7);
}
/deep/.late {
  background: rgba($color: #ffc000, $alpha: 0.7);
}
/deep/.leave {
  background: rgba($color: #92d050, $alpha: 0.7);
}
/deep/.out {
  background: rgba($color: #fff2cc, $alpha: 1.0);
}