Element UI 动态校验多个Form表单

1. 动态生成多个表单

<template>
  <div v-for="(item, index) in formDataArr" :key="index">
          <span class="left-box">{{ item.name}}</span>
          <el-form
            :inline="true"
            :model="item"
            label-width="90px" 
            :ref="'form' + index" 
          >
           <el-form-item
              :label="child.situationName"
              v-for="(child, index) in item.formItems"
              :key="index"
              :prop="'formItems.' + index + '.weight'"
              :rules="[
                { required: true, message: '不能为空', trigger: 'blur' }, 
              ]"
            >
              <el-input
                v-model="child.weight"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
        </el-form>
</template>

2.data数据

data() {
    return { 
      formDataArr:[
			{  
				"name":"表单1",
				"formItems":[
					{ 
						"situationName":"配合",
						"weight":null
					},
					{ 
						"situationName":"不配合",
						"weight":null
					}
				], 
			},
			{  
				"name":"表单2",
				"formItems":[
					{ 
						"situationName":"成功",
						"weight":null
					},
					{ 
						"situationName":"不失败",
						"weight":null
					}
				], 
			},
		]
    };
  },

3.校验方法

  methods: {
	 async confirmSave() {
	      var validateArr = [];
	      for (let i = 0; i < this.formDataArr.length; i++) {
	       	 let item = this.$refs["form" + i][0].validate();
       		 validateArr.push(item);
	      }  
	      Promise.all(validateArr)
	        .then(async () => { 
	          console.log("校验成功"); 
	        })
	        .catch(() => { 
	          console.log("校验失败");
	        });
    	}
	}