vue+elementUI多个表单同时校验

在项目开发中会遇到多个表单块同时做校验的情况，这时候会因为代码分散或者呈现在不同组件而无法一次性校验完成。

父组件调用

let valid = await this.$refs.formData.handleSubmitForm()

子组件

//在data中定义
refArr: ['form1','form2']
//提交或者保存
    handleSubmitForm() {
      const v = new Promise((resolve, reject) => {
        Promise.all(this.refArr.map(this.checkForm)).then(res => {
          const validateResult = res.every(item => !!item)
          if (validateResult) {
            resolve(validateResult)
            console.log(res, '表单都验证成功了')
          } else {
            reject(validateResult)
            console.log(res, '表单未校验通过')
          }
        })
      })
      return v
    },
    checkForm(formName) {
      let t = this
      return new Promise(resolve => {
        t.$refs[formName][0].validate(res => {
          resolve(res)
        })
      })
    },
    //清除表单内容
    handleresetFields() {
      this.refArr.forEach(el => {
        this.resetForm(el)
      })
    },
    resetForm(formName) {
      this.$refs[formName][0].resetFields()
    }