vue v-for form在element中如何校验

直接上例子：

第一种：验证方法带循环

<template>
  <div>
    <div v-for="(item,index) in datas.realForm" :key="index">

      <el-form ref="form" :model="datas" label-width="160px" :rules="rules">
        <el-form-item label="名字" :rules="rules.name" :prop="`realForm.${index}.name`">
          <el-input v-model="item.name" placeholder="名字"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="item.age" placeholder="年龄"></el-input>
        </el-form-item>
      </el-form>

    </div>

    <el-button @click="submit">保存</el-button>

  </div>
</template>
<script>

export default {
  name: "test",
  data() {
    return {
      datas:{
        realForm:[
          {
            name:'',
            age:12,
          },
          {
            name:'',
            age:11,
          },
        ]
      },
      rules:{
        name:[{required: true, message: '请输入名字', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submit(){
      this.datas.realForm.forEach((item, index)=>{
        this.$refs.form[index].validate((valid)=>{
          if(valid){
            alert('提交成功')
          }
        })
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style>
</style>

第二种：验证方法带循环

<template>
  <div>
    <div v-for="(item,index) in datas.realForm" :key="index">

      <el-form ref="form" :model="datas" label-width="160px">
        <el-form-item label="名字" :prop="`realForm.${index}.name`" :rules="[
                                   { required: true, message: '名字', trigger: 'blur' }
                                ]">
          <el-input v-model="item.name" placeholder="名字"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="item.age" placeholder="年龄"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <el-button @click="submit">保存</el-button>

  </div>
</template>
<script>

export default {
  name: "test",
  data() {
    return {
      datas:{
        realForm:[
          {
            name:'',
            age:12,
          },
          {
            name:'',
            age:11,
          },
        ]
      }
    }
  },
  methods: {
    submit(index){
      this.datas.realForm.forEach((item, index)=>{
        this.$refs.form[index].validate((valid)=>{
          if(valid){
            alert('提交成功')
          }
        })
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style>
</style>

第三种：验证方法没有循环

<template>
  <div>
    <el-form ref="form" :model="datas">
      <template v-for="(item,index) in datas.subItemObjList">
        <el-form-item label="项目编号" :prop="`subItemObjList.${index}.projectId`">
          <el-input v-model="item.projectId" :disabled="true"/>
        </el-form-item>
        <el-form-item label="项目名称" :prop="`subItemObjList.${index}.projectName`">
          <el-input v-model="item.projectName" :disabled="true"/>
        </el-form-item>
        <el-form-item label="项目负责人" :prop="`subItemObjList.${index}.projectLeaders`" :rules="[
                                   { required: true, message: '请选择项目负责人', trigger: 'change' }
                                ]">
          <el-input v-model="item.projectLeaders"
                    placeholder="请选择"/>
        </el-form-item>
        <el-form-item label="项目执行单位" :prop="`subItemObjList.${index}.projectExeCompany`" :rules="[
                                  {required: true, message: '请选择项目执行单位', trigger: 'change'}
                                ]">
          <el-select v-model="item.projectExeCompany" clearable filterable
                     placeholder="选择项目执行单位">

          </el-select>
        </el-form-item>
      </template>
    </el-form>
    <el-button
      class="newAdd"
      type="primary"
      @click="submitForm"
      style="width:100px;height:36px;"
    >保存
    </el-button>
  </div>
</template>
<script>

export default {
  name: "test",
  data() {
    return {
      datas: {
        subItemObjList: [{
          projectSubNumId: 0,
          projectId: '',
          projectSid: this.$route.query.projectSid,
          projectCode: '',
          projectName: '',
          projectLeader: '',
          projectLeaderId: '',
          projectLeaders: '',
          projectExeCompany: null,
          projectExeDept: '',
          performanceCompany: '',
          performanceDept: '',
          subProportion: '',
          subMoney: '',
          segmentationBasis: '',
          projectCodeMain: '',
          remarks: ''
        }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style>
</style>