vue3循环表单【以el-form组件为例】，如何校验所有表单，所有表单校验通过后提交

1.循环时，在组件标签上使用ref绑定组件实例

3.如何校验所有表单都通过后方可提交？利用promise.all()判断

代码如下：

<template>
  <div>
    <!-- 循环渲染表单 -->
    <el-form
      v-for="(formItem, index) in formList"
      :key="index"
      :model="formItem"
      :rules="rules"
      ref="formRefs"
      class="dynamic-form"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formItem.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="formItem.age"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formItem.email"></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="submitForms">提交</el-button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formList = reactive([
  { name: '', age: '', email: '' },
  { name: '', age: '', email: '' }
])

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', message: '年龄必须是数字', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ]
}

// 用于存储每个表单的 ref
const formRefs = ref([])

// 提交表单
const submitForms = () => {
  // 校验所有表单
  const validationPromises = formRefs.value.map((formRef) => {
    return new Promise((resolve, reject) => {
    // 对每一个具体表单的校验，都返回一个是否成功的promise状态
      formRef.validate((valid) => {
        valid ? resolve(true) : reject(false)
      })
    })
  })

// 最重要的思路
  Promise.all(validationPromises)
    .then(() => {
      // 所有表单校验通过
      ElMessage.success('所有表单校验通过')
      console.log('提交表单数据:', formList)
    })
    .catch(() => {
      // 有表单校验失败
      ElMessage.error('表单校验失败，请检查输入')
    })
}
</script>

<style>
.dynamic-form {
  margin-bottom: 20px;
}
</style>