elementui的el-table给每个单元格赋予色彩

<el-table :data="tableData" height="680" :cell-style="ssssssssss">
          <el-table-column type="index" fixed="left" width="55" label="#"></el-table-column>
          <el-table-column :label="'x'+(index+1)" v-for="(item,index) in 7" :key="index">
            <el-table-column :prop="'xx'+(index+1)" :label="'xx'+(index+1)" width="160"></el-table-column>
            <el-table-column :prop="'xxx'+(index+1)" :label="'xxx'+(index+1)" width="160"></el-table-column>
            <el-table-column :prop="'xxxx'+(index+1)" :label="'xxxx'+(index+1)" width="160"></el-table-column>
          </el-table-column>
        </el-table>

ssssssssss({row, column, rowIndex, columnIndex}){
      let cellStyle;
      //成品
      if (columnIndex < 9 && columnIndex > 0 && row.FMColor != "") {
        cellStyle = "background:"+row.FMColor+";color:white";
        return cellStyle;
      }
      //半成品
      if (columnIndex >= 9 && row.SFMColor.length != 0) {
        for (let index = 0; index < row.SFMColor.length; index++) {
          if (column.label.indexOf(index+1) != -1) {
            cellStyle = "background:"+row.SFMColor[index]+";color:white";
            return cellStyle;
          }
        }
      }
      if (columnIndex === 0 && rowIndex % 2 === 1) {
        cellStyle = "background:oldlace;";
        return cellStyle;
      }
    },

/**处理原始数据对象转为需要的对象 */
    handleOriginData(val,nowDate){
      let x = {
        OrderCode:val.s.OrderCode,
        WorkOrderCode:val.s.WorkOrderCode,
        RowNo:val.s.RowNo,
        MaterialCode:val.s.MaterialCode,
        DrawingCode:val.s.DrawingCode,
        MaterialName:val.s.MaterialName,
        PlanAmount:val.s.PlanAmount,
        ActualPlanAmount:val.s.ActualPlanAmount,
        FMColor:"",
        SFMColor:[],
      };
      for (let index = 0; index < val.a.length; index++) {
        let OSN = "OperationSeqNo"+(index+1);
        let ON = "OperationName"+(index+1);
        let QA = "QualifiedAmount"+(index+1);
        x[OSN] = val.a[index].OperationSeqNo;
        x[ON] = val.a[index].OperationName;
        x[QA] = val.a[index].QualifiedAmount;
        //处理颜色（半成品物料）状态 0、1、2、3、4、5、6
        if (val.a[index].OperationState == 0) {
          x.SFMColor.push("#F52D2D")
        }
        if (val.a[index].OperationState == 1) {
          x.SFMColor.push("#F7A120")
        }
        if (val.a[index].OperationState == 2) {
          x.SFMColor.push("#EB9C9C")
        }
        if (val.a[index].OperationState == 3) {
          x.SFMColor.push("#64E723")
        }
        if (val.a[index].OperationState == 4) {
          x.SFMColor.push("#C0C1C4")
        }
      }
      //处理颜色（成品物料）
      let valtime = new Date(val.s.PlanEndDate).getTime();
      if ((val.s.WorkOrderState != 3) && (val.s.WorkOrderState != 4)) {
        //小于七天
        if ((valtime-nowDate) <= 604800000) {
          x.FMColor = "#B30A0A";
        }
        //大于七天小于30天
        if ((valtime-nowDate) <= 2592000000 && (valtime-nowDate) > 604800000) {
          x.FMColor = "#EB910A";
        }
      }
      //返回数据
      return x;
    },

结语

这是一个总结，自己看懂即可