在 Vue 中使用 `v-for` 循环创建多个 `el-form` 并对每个 `el-form` 进行非空验证，可参考以下步骤和示例代码： 首先，定义表单数据和验证规则。表单数据通常是一个数组，每个元素代表一个表单的数据对象；验证规则可以是一个对象，包含每个表单项的验证规则。 然后，使用 `v-for` 循环创建多个 `el-form`，并为每个 `el-form` 绑定对应的表单数据和验证规则。同时，使用 `ref` 来获取每个 `el-form` 的实例，以便后续进行表单验证。 最后，在提交表单时，遍历所有 `el-form` 的 `ref`，调用每个 `el-form` 的 `validate` 方法进行非空验证。 以下是一个示例代码： ```vue <template> <div> <el-form v-for="(formData, index) in formList" :key="index" :ref="(el) => formRefs[index] = el" :model="formData" :rules="formRules" > <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="formData.age"></el-input> </el-form-item> </el-form> <el-button @click="submit">提交</el-button> </div> </template> <script setup> import { ref } from 'vue'; import { ElForm } from 'element-plus'; // 表单数据列表 const formList = ref([ { name: '', age: '' }, { name: '', age: '' } ]); // 表单 ref 列表 const formRefs = ref<Array<InstanceType<typeof ElForm>>>([]); // 表单验证规则 const formRules = ref({ name: [ { required: true, message: '姓名不能为空', trigger: 'blur' } ], age: [ { required: true, message: '年龄不能为空', trigger: 'blur' } ] }); // 提交表单方法 const submit = async () => { try { const promises = formRefs.value.map(item => item && item.validate()); const results = await Promise.all(promises); if (results.every(res => res)) { console.log('所有表单验证通过', formList.value); } else { console.log('存在表单验证不通过'); } } catch (error) { console.log('表单验证出错', error); } }; </script> ``` ###