el-table加星标和表单验证以及控制单元格样式

1. 表头加星标

利用el-table-column中的插槽

<template #header>
   <span style="color: red; margin-right: 4px">*</span>
   <span>金额（元）</span>
</template>

2.表单验证

 用el-form将table表格包裹起来

<el-form :inline="true" v-model="dataLists" :rules="rules">
   <el-table
     ref="tableReim"
     :data="dataLists.tableDataReim"
      :cell-class-name="setCellStyle"
   >
      <el-table-column
                label="金额（元）"
                show-overflow-tooltip
                width="250"
                header-align="center"
                prop="amount"
              >
                <template #header>
                  <span style="color: red; margin-right: 4px">*</span>
                  <span>金额（元）</span>
                </template>
                <template #default="scope">
                  <el-form-item
                    size="mini"
                    :prop="'tableDataReim.' + scope.$index + '.amount'"
                    :rules="{
                      validator: isMoney,
                      prodObj: scope.row,
                      trigger: 'change',
                    }"
                  >
                    <el-input
                      size="small"
                      maxlength="20"
                      v-model="scope.row.amount"
                      
                    />
                    <span>{{ scope.row.amount }}</span>
                  </el-form-item>
                </template>
              </el-table-column></el-table>
</el-form>

注意el-form-item中prop值的绑定，isMoney为自定义规则，

 const isMoney = (rule: any, value: any, callback: any) => {
      var regs = /^\d+(\.\d+)?$/;
      var j = regs.test(rule.prodObj.amount);
      if (rule.prodObj.amount) {
        errorRow = rule.prodObj;
        if (!j) {
          isAdd.value = true;
          callback(new Error("请输入正确的金额格式"));
        } else {
          
          callback();
        }
      } 
    };

3.为满足条件的单元格设置额外样式 

需要用到el-table的cell-class-name属性，也可以使用cell-style属性，如何使用看官方文档。

我这里用的是cell-class-name，绑定的是一个函数，函数返回一个类名。

function setCellStyle({ row, column, rowIndex, columnIndex }: any) {
      if (row.amount == "" && column.label == "金额（元）") {
//row.amount是这一行金额的数据，column.label是表头，其他同理，实在不知道，就打印出来看
        return "cellStyle";
      }
      if (row.mainUses == "" && column.label == "用途") {
        return "cellStyle";
      }
      if (row.payeeName == "" && column.label == "收款人名称") {
        return "cellStyle";
      }
      if (row.payeeBank == "" && column.label == "开户行") {
        return "cellStyle";
      }
      if (row.payeeAccount == "" && column.label == "银行账号") {
        return "cellStyle";
      }
    }

        /deep/.cellStyle {
            background-color: rgba(255, 0, 0, 0.12) !important;
          }

当类名嵌套过深，可以在前面加上/deep/