在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来同步验证两个表单。当两个表单都验证通过后，它们才会一起提交。如果任何一个表单验证失败，它将不会继续提交，并且会打印出错误信息。