element 多個(gè)form一起校驗(yàn)

<template>
    <div>
    <el-form :model="form1" ref="form1Ref" :rules="rlues1"></el-form>
    <el-form :model="form2" ref="form2Ref" :rules="rlues2"></el-form>
    <el-form :model="form3" ref="form3Ref" :rules="rlues3"></el-form>
    <el-form :model="form4" ref="form4Ref" :rules="rlues4"></el-form>
    <el-button @click="submitForm"></el-button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        rlues1: {
            name: {required: true, message: '必填', trigger: 'blur'}
        }
      }
    }
    methods: {
      submitForm () {
        Promise.all([
          this.validateForm('form1Ref'),
          this.validateForm('form2Ref'),
          this.validateForm('form3Ref'),
          this.validateForm('form4Ref')
        ]).then(() => {
          console.log('校驗(yàn)成功')
        }).catch((err) => {
          console.log('失敗', err)
        })
      },
      validateForm (formName) {
        return new Promise((resolve, reject) => {
          this.$refs[formName].validate((valid) => {
            valid ? resolve() : reject(new Error('檢驗(yàn)失敗!'))
          })
        })
      }
    }
  }
</script>