对el-table中表单进行验证, 怎么验证el-form中的表单

 

 1.html   注意el-from ,嵌套在table外层 , 不然后面提交不能进行验证

    <el-form
            :model="checkIn"
            :rules="checkIn.rules"
            ref="tableDataCheckForm"
          >
            <el-table
              ref="tableDataCheck"
              :data="checkIn.tableDataCheckInfo"
              style="width: 100%"
              border
            >
              <el-table-column align="center" prop="name" label="入住人姓名">
                <template slot-scope="scope">
                  <el-form-item
                    v-if="scope.row.redact"
                    :prop="'tableDataCheckInfo.' + scope.$index + '.name'"
                    :rules="checkIn.rules.name"
                  >
                    <el-input
                      v-model="scope.row.name"
                      placeholder="请填写入住人姓名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    v-else
                    :prop="'tableDataCheckInfo.' + scope.$index + '.name'"
                    :rules="checkIn.rules.name"
                  >
                    <el-select
                      @change="val => selectName(val, scope.$index)"
                      style="width:100%"
                      v-model="scope.row.name"
                      :clearable="$constants.clearable"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in checkInfoOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name"
                      >
                        <span style="float: left">{{ item.name }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ item.phone }}</span
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <!-- </el-form-item> -->
                </template>
              </el-table-column>
              <el-table-column
                width="190px"
                align="center"
                prop="identityNumber"
                label="身份证号码"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="
                      'tableDataCheckInfo.' + scope.$index + '.identityNumber'
                    "
                    :rules="checkIn.rules.identityNumber"
                  >
                    <el-input
                      :disabled="!scope.row.redact"
                      placeholder="身份证号码"
                      v-model="scope.row.identityNumber"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="phone"
                label="手机号码"
                width="160px"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'tableDataCheckInfo.' + scope.$index + '.phone'"
                    :rules="checkIn.rules.phone"
                  >
                    <el-input
                      :disabled="!scope.row.redact"
                      placeholder="手机号码"
                      v-model="scope.row.phone"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="phone"
                width="150px"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="
                      redactHandler(scope.row, scope.$index, scope.row.redact)
                    "
                    >{{ scope.row.redact ? "选择" : "填写" }}</el-button
                  >
                  <el-button
                    type="text"
                    @click="delCheckInfoPeople(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form>

2.data结构   数据结构为  表单对象:{表单规则:{},表格数组:[] }  ,注意表格数组一定要用对象包起来

  data() {
    var validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("入住人不能为空"));
      } else {
        callback();
      }
    };
    var validateIdentityNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error("身份证号码不能为空"));
      } else {
        if (value.length >= 18) {
          callback();
        } else {
          callback(new Error("身份证号码格式不正确"));
        }
      }
    };
    var validatePhone = (rule, value, callback) => {
      rule = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!value) {
        callback(new Error("请输入手机号码"));
      } else {
        if (rule.test(value)) {
          callback();
        } else {
          callback("手机号码格式不正确");
        }
      }
    };
    return {
      tableInput: true,
        /**表单对象*/
      checkIn: {
        rules: {
          name: [{ validator: validateName, trigger: ["change", "blur"] }],
          identityNumber: [
            { validator: validateIdentityNumber, trigger: ["change", "blur"] }
          ],
          phone: [{ validator: validatePhone, trigger: ["change", "blur"] }]
        },
          /**表格数组*/
        tableDataCheckInfo: [
          {
            /*下拉框为显示 */
            redact: false,
            name: "",
            identityNumber: "",
            phone: null,
            wxUserId: ""
          }
        ]
      },
      checkInfoOptions: [],
      dialogVisible: false,
    };
  },

3.逻辑结构

   /**提交*/
 submitForm() {
      if (!this.checkIn.tableDataCheckInfo.length) {
        this.$message.warning("请填写入住信息");
        return false;
      } else {
        this.$refs["tableDataCheckForm"].validate(v => {
          if (v) {
          /** 这里是通过后的操作, 比如发送请求等等*/
          } else {
            return false;
          }
        });
      }
    }
    /**增加一行*/
    addCheckInfoPeople() {
      this.checkIn.tableDataCheckInfo.push({
        redact: false,
        name: "",
        identityNumber: "",
        phone: null,
        wxUserId: ""
      });
    },
    /**删除一行*/
        delCheckInfoPeople(index) {
      this.checkIn.tableDataCheckInfo.splice(index, 1);
    },
    /*变成输入框/下拉框*/
    redactHandler(row, index, state) {
      this.checkIn.tableDataCheckInfo[index].redact = !state;
    },