el-table表单分步验证

<template>
  <div class="box">
   当前步骤 {{step}}
    <div class="form1">
      <el-form :model="form1Data" ref="form1" label-width="130px" :rules="rules">
        <el-form-item prop="name" label="第一步的姓名">
          <el-input v-model="form1Data.name"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="form2">
      <el-form :model="form2Data" ref="form2" label-width="130px" :rules="rules">
        <el-form-item prop="name" label="第二步的姓名">
          <el-input v-model="form2Data.name"></el-input>
        </el-form-item>

      </el-form>
    </div>
    <div class="form3">
      <el-form :model="form3Data" ref="form3" label-width="130px" :rules="rules">
        <el-form-item prop="name" label="第三步的姓名">
          <el-input v-model="form3Data.name"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" @click="nextStep">下一步</el-button>
    <el-button @click="resetForm('form2')">重置</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        step:1,
        submit:false,
        form1Data: {
          name: ''
        },
        form2Data: {
          name: ''
        },
        form3Data: {
          name: ''
        },
        rules: {
          name: [{
              required: true,
              message: '年龄不能为空'
            }
          ]
        }
      };
    },
    methods: {
      nextStep(){
        let list = []
        if(this.step===1){
          this.provali('form1').then((res)=>{
            alert(res)
            this.step++
          }).catch((res)=>{alert(res)})
        }
        if(this.step===2){
           list.push(this.provali('form1'),this.provali('form2'))
           Promise.all(list).then((res)=>{
             alert(res)
           this.step++
           }).catch((res)=>{
             alert(res)
           })
           list=[]
        }
       if(this.step===3){
         list.push(this.provali('form1'),this.provali('form2'),this.provali('form3'))
         Promise.all(list).then((res)=>{
           alert(res)
         }).catch((res)=>{
          alert(res)
         })
       }

      },
      provali(formName){
        return new Promise((resolve,reject)=>{
          this.$refs[formName].validate((valid)=>{
            if(valid){
              resolve(formName+'验证通过')
            }else{
              reject(formName+'验证失败')
            }
          })
        })
      }
      
      ,
      resetForm() {
        this.$refs['form1'].resetFields();
        this.$refs['form2'].resetFields();
        this.$refs['form3'].resetFields();
      }
    }
  }
</script>
<style type="text/css">
.el-input {border: 1px solid #000000;}
</style>

分步骤进行表单验证，点击下一步验证当前步数之前的表单