Vue element UI多个表单同时校验

情况1：如下情景的多表单，两个表单之间没有任何关系。

假设两个表单绑定的ref分别是form1，form2； 

submit(){
    const form = new Promise((resolve, reject) => {
        this.$refs["form"].validate(valid => {
            if (valid) {
                resolve();
            }
        });
    });
    const form1 = new Promise((resolve, reject) => {
        this.$refs["form1"].validate(valid => {
            if (valid) {
                resolve();
            }
        });
    });
    Promise.all([form, form1]).then(() => {
        //验证成功
        console.log("success")
    }).catch((error) {
        //验证失败
        console.log("error");
    })
}

也可以这样写： 

async submitForm(formName) {
    try {
        await Promise.all([
            this.$refs.form1.validate(),
            this.$refs.form2.validate()
        ]);
        // 验证成功
        console.log('success');
    } catch (error) {
        // 验证失败
        console.log("error");
        return;
    }
}

情况2：如下情景的多表单，两个表单是通过for循环出来，所用的验证规则相同。

let formList = this.$refs.form.map(f=>f.validate());
Promise.all(formList).then(()=>{
    //验证通过
    console.log("success");
}).catch(()=>{
    console.log("error")
})