ElementUI Form表单中的 v-for循环创建表单及校验

1.表单的数据定义，首先定义一个formData,当中的childList为循环表单的绑定值

 data() {
    return {
        formData:{
            title: "",
            childList: [{}]
        },
    }
 }

2.循环创建表单，prop也需要动态绑定，:prop="'childList.' + index + '.name'" 写成这种形式,绑定校验规则rules="rules.name"

<el-row v-for="(item, index) in formData.childList" :key="item.idCard">
            <el-col :span="8">
                <el-form-item label="姓名" :prop="'childList.' + index + '.name'" :rules="rules.name">
                    <el-input v-model="item.name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="手机号码" :prop="'childList.' + index + '.iphone'" :rules="rules.iphone">
                    <el-input v-model="item.iphone"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="身份证号码" :prop="'childList.' + index + '.idCard'" :rules="rules.idCard">
                    <el-input v-model="item.idCard"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

3.最后，在方法中可以通过this.$refs["ruleForm"].validate((val) => {})进行校验了

submitForm() {//提交方法
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }