vue，elementUI多表单同时提交，表单校验解决方案

在Vue中使用Element UI时，可以通过el-form组件实现多个表单的同步提交。你可以在每个表单外部添加一个<el-form>标签，并为每个表单设置不同的ref属性。然后，你可以通过这些ref来分别调用validate方法来进行验证，并在所有表单验证通过后进行提交操作。

以下是一个简单的例子：

<template>
  <div>
    <el-form :model="form1" ref="form1" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form1.username"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
      <el-form-item>
        <el-button type="primary" @click="submitForms">提交</el-button>
      </el-form-item>
    </el-form>
 
    <el-form :model="form2" ref="form2" label-width="100px">
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form2.email"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
    </el-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form1: {
        username: '',
        // 其他表单数据
      },
      form2: {
        email: '',
        // 其他表单数据
      },
      // 其他表单数据...
    };
  },
  methods: {
    submitForms() {
      Promise.all([this.$refs.form1.validate(), this.$refs.form2.validate()]).then(() => {
        // 所有表单验证通过后，执行提交操作
        console.log('提交数据:', this.form1, this.form2);
        // 执行提交操作...
      }).catch(() => {
        console.log('表单验证失败');
      });
    },
  },
};
</script>

在这个例子中，我们有两个表单，每个表单通过ref属性被分配了一个唯一的引用。submitForms方法使用Promise.all来同步验证两个表单。当两个表单都验证通过后，它们才会一起提交。如果任何一个表单验证失败，它将不会继续提交，并且会打印出错误信息。