elementUI plus el-form校验多个表单

在Element UI Plus中，如果需要验证多个表单，可以使用el-form的ref属性来分别标识每个表单，并通过validate方法来进行验证。以下是一个简单的例子：

<template>
  <el-form ref="form1" :model="form1">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form1.username"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
 
  <el-form ref="form2" :model="form2">
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form2.email"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
 
  <el-button @click="validateForms">验证表单</el-button>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const form1 = ref({
      username: '',
      // 其他数据
    });
 
    const form2 = ref({
      email: '',
      // 其他数据
    });
 
    const validateForms = async () => {
      try {
        await form1.value.validate();
        await form2.value.validate();
        alert('表单验证通过！');
      } catch (error) {
        alert('表单验证失败！');
      }
    };
 
    return {
      form1,
      form2,
      validateForms,
    };
  },
};
</script>

在这个例子中，我们有两个el-form实例，分别通过ref属性标识为form1和form2。validateForms函数通过调用每个表单实例的validate方法来逐个验证它们。如果所有表单验证通过，会弹出一个消息提示验证通过；如果任何一个表单验证失败，则会抛出一个错误，并弹出一个消息提示验证失败。