在 Vue 3 中使用 `v-for` 循环多个 `el-form` 并对每个 `el-form` 进行 `validate` 非空验证，可借助 `ref` 和组合式 API 实现。以下是具体代码示例： ```vue <template> <div> <el-form v-for="(item, index) in formList" :key="index" :ref="(el) => formsRefs[index] = el" :model="item" :rules="rules" > <el-form-item label="姓名" prop="name"> <el-input v-model="item.name"></el-input> </el-form-item> <el-form-item label="电话" prop="phone"> <el-input v-model="item.phone"></el-input> </el-form-item> <el-button @click="validateForm(index)">提交</el-button> </el-form> </div> </template> <script setup> import { ref } from 'vue'; import { ElForm } from 'element-plus'; const formList = ref([ { name: '', phone: '' }, { name: '', phone: '' }, // 可按需添加更多表单数据 ]); const formsRefs = ref<(InstanceType<typeof ElForm> | null)[]>([]); const rules = { name: [ { required: true, message: '姓名不能为空', trigger: 'blur' } ], phone: [ { required: true, message: '电话不能为空', trigger: 'blur' } ] }; const validateForm = (index: number) => { const form = formsRefs.value[index]; if (form) { form.validate((valid) => { if (valid) { console.log('表单验证通过'); // 可在此添加提交表单的逻辑 } else { console.log('表单验证失败'); } }); } }; </script> ``` 上述代码中，`formList` 存储多个表单的数据，`formsRefs` 用于存储每个 `el-form` 的引用。在 `validateForm` 方法里，通过 `formsRefs` 获取对应 `el-form` 的实例，调用 `validate` 方法进行非空验证。