vue数组循环表单并进行相应的校验

废话不多说，直接上代码

<template>
  <div>
    <div v-for="(item,index) in formData" :key="index">
        <div class="left">
          //划重点：:ref="'item'+index" 
          <el-form :model="item" :rules="rules" :ref="'item'+index" class="nameBox">
            <el-form-item prop="name">
            <el-input type="type" v-model="item.name" />
            </el-form-item>
          </el-form>
        </div>
    </div>
    <el-button type="primary" @click="save">Save</el-button>
  </div>
<template>
<script>
  export default {
    data() {
      return {
       formData: [{name:""}], 
       rules:{
         name:[{message:"请输入",required: true, trigger: "blur"}]
       }, 
      }
    },
    methods: {
      save() {
        let This = this;
        let allValidate = [];
        this.formData.forEach((item,index) => {
          //有多个输入框需校验，待都校验成功后再进行别的操作，所以需要使用Promise
          allValidate.push(new Promise((rev,rej)=>{
            //划重点：This.$refs['item'+index][0]
            This.$refs['item'+index][0].validate((valid) => {
              if(valid){rev()}else{rej()}
            })
          }))
        });
        Promise.all(allValidate).then(()=>{
          //所有输入框都校验成功后的处理  
        }).catch(()=>{});
      },
    }
  }
</script>

声明：此博客为个人学习之用，如与其他作品雷同，纯属巧合，并请明示指出