1.element-ui 给el-table添加校验

1.列表部分

      <el-form ref="ruleForm" :rules="formRules" :model="ruleForm" label-width="200px">
        <el-row>
          <el-col :span="24">
          <!-- <el-form-item label="合同信息:" required > -->
            <el-form-item label="合同信息：" prop="tableData">
              <el-table :data="ruleForm.tableData" height="200" class="box" :header-cell-style="{ background: 'rgb(242, 242, 242)' }" row-key="id" border fit highlight-current-row style="margin-top: 10px;">
                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column prop='name' label='合同名称' align="center"></el-table-column>
                <el-table-column prop="money" label='合同金额（元）' align="center">
                  <template slot-scope="scope">
                    //:prop="'tableData.' + scope.$index + '.money'" 
                    //:rules="formRules.money"
                    <el-form-item :prop="'tableData.' + scope.$index + '.money'" :rules="formRules.money">
                      <el-input type="text" v-model="scope.row.money" />
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

2.定义变量

var amount1 = (rule, value, callback) => {
      // console.log("value", value, rule, rule.field, rule.field.split("."));
      let index = rule.field.split(".")[1];
      if (value === "" || value == null) {
        callback(new Error("请输入"));
      } else if (!/^(0|[1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(value)) {
        callback(new Error("请输入浮点数，保留两位小数"));
      } else if (
        this.formData.tableData[index].money>
        this.formData.tableData[index].money1
      ) {
        callback(new Error("money应该比money1小"));
      } else {
        callback();
      }
    };
     ruleForm:
      {
        tableData: [
        {money1:2,money:1}
        ], 
     },
     //:rules="formRules.money"与上面对应
     formRules: {
        money: [
          {
            required: true,
            message: "请选输入",
            trigger: "change",
          },
          { validator: amount1, required: true, trigger: "blur" },
        ],
      },

//表单的ref="ruleForm"
preserveRuleForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
			//此处为通过校验的代码
        } else {
          console.log("error submit!!");
          return false;
        }
      });
},

ｃｓｓ样式

<style>
.el-table .el-form-item__error {
  padding-top: 1px;
}
.el-table .el-form-item__content {
  margin-bottom: 13px !important;
  margin-top: 13px !important;
}
</style>

2.给表单嵌套对象添加校验

      <el-form ref="ruleForm" :rules="formRules" :model="ruleForm" label-width="200px">
        <el-row>
          <el-col :span="24">
             //prop="legalCases.code"
            <el-form-item label="编号：" prop="legalCases.code">
              <el-input v-model="ruleForm.legalCases.code" placeholder="" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位名称：" prop="legalCases.name">
              <el-input v-model="ruleForm.legalCases.name" placeholder="" ></el-input>
            </el-form-item>
          </el-col>
      </el-row>
     </el-form>
         

ruleForm: {
   legalCases: {
   		code:"",
   		name:"",
   }, 
},
//prop="legalCases.code"
formRules: {
        legalCases: {
          code: [
            { required: true, message: "不能为空", trigger: "blur" },
          ],
          name: [
            { required: true, message: "不能为空", trigger: "blur" },
          ],
        },
},

preserveRuleForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
			//此处为通过校验的代码
        } else {
          console.log("error submit!!");
          return false;
        }
      });
},

2.1 表单校验和重置

在el-form  中  ref="formref" :model="form" :rules="formRules"//这几个是必须的，注意绑定:model="form"，v-model将不起作用

prop="keyWord",在el-form-item中必须使用，同时keyWord是在form.keyWord

<el-form-item label="姓名：" prop="keyWord">
        <el-select v-model="formInline.keyWord" placeholder="姓名" >
           <el-option label="区域一" value="shanghai"></el-option>
           <el-option label="区域二" value="beijing"></el-option>
         </el-select>
</el-form-item>

注意：form.keyWord和formRules.keyWord必须统一
重置

prop="keyWord"//必须的,不然重置不起作用

<el-button @click="resetForm('formRules')">重置</el-button>
 resetForm(formName) {
    this.$refs[formName].resetFields();
},

 var keyWord= (rule, value, callback) => {
      // console.log("value", value);
      if (value === "" || value == null) {
        callback();
      } else if (!/^(0|[1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(value)) {
        callback(new Error("请输入浮点数，保留两位小数"));
      } else {
        callback();
      }
    };
 var mobilePhone = (rule, value, callback) => {
      if (value) {
        let mobile1 = /0\d{2,3}-\d{7,8}$/;
        let mobile2 = /[0][1-9][0-9]{9}$/;
        let tel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (tel.test(value) || mobile1.test(value) || mobile2.test(value)) {
          callback();
        }else{
          callback(new Error("请输入正确的联系方式"));
        }
      } else {
        callback();
      }
    };
return {
 formRules: {
        keyWord: [
          { validator: keyWord, required: false, trigger: "blur" },// required: false默认情况下是不带*
        ],
        ContentType: [
          { required: true, message: '请选择', trigger: 'blur' },// required: true默认情况下是带*
        ],
        mobilePhone : [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
      },
}