通过以下两种方法实现多个表单的统一校验：
1. 定义模板内容
在 el-form 表单中添加 ref 属性来获取表单组件对象
<template> <div> <el-form ref="form1" :rules="rules1"> <!-- 表单内容 --> </el-form> <el-form ref="form2" :rules="rules2"> <!-- 表单内容 --> </el-form> <el-button @click="submit">提交</el-button> </div> </template>
2. 方法一
在上述代码中，我们给每个 el-form 表单添加了 ref 属性，分别为 form1 和 form2，在 submit 方法中，分别对两个表单使用 validate 方法进行表单校验
export default { data() { return { form1: {}, form2: {}, rules1: {}, rules2: {} } }, methods: { submit() { const form1Valid = this.$refs.form1.validate() const form2Valid = this.$refs.form2.validate() if (form1Valid && form2Valid) { // 统一提交表单 } } } }
3. 方法二
在上述代码中，我们给每个 el-form 表单添加了 ref 属性，在 submit 方法中，遍历 formRefs 表单数组，依次对每个表单进行校验
export default { data() { return { // 数组用来存储所有表单的 ref 值 formRefs: [ 'form1', 'form2' ], form1: {}, form2: {}, rules1: {}, rules2: {} } }, methods: { submit() { // 标记所有表单是否通过校验的变量 let isValid = true // 遍历表单数组，依次对每个表单进行校验 this.formRefs.forEach(ref => { this.$refs[ref].validate(valid => { if (!valid) { isValid = false } }) }} // 如果所有表单都校验通过，执行提交操作 if (isValid) { // 执行提交操作 } } } }
