wap小说网站源码聊城建设局网站

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

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

代码如下：

<template><div><!-- 循环渲染表单 --><el-formv-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>