### 如何在循环生成多个 `el-form` 时进行校验 当需要在一个页面中循环生成多个 `el-form` 并分别对其进行校验时，可以借助 Vue 的动态组件特性以及 Element UI 提供的校验接口完成此需求。以下是具体的实现方式： #### 页面结构设计 假设我们需要展示一组表单，每组表单都具有相同的字段布局和校验逻辑。可以通过数组驱动 `v-for` 来渲染多个 `el-form` 实例。 ```vue <template> <div> <!-- 循环生成多个表单 --> <div v-for="(item, index) in formsList" :key="index"> <el-form :ref="'form' + index" :model="item.formData" :rules="rules" > <el-form-item label="姓名" prop="name"> <el-input v-model="item.formData.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="item.formData.age"></el-input> </el-form-item> <el-button type="text" @click="validateSingleForm(index)"> 校验第 {{ index + 1 }} 个表单 </el-button> </el-form> </div> <el-button type="primary" @click="validateAllForms">批量校验所有表单</el-button> </div> </template> <script> export default { data() { return { formsList: [ { formData: { name: '', age: '' } }, { formData: { name: '', age: '' } } ], rules: { name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', min: 0, max: 120, message: '年龄应在0到120之间', trigger: 'blur' } ] } }; }, methods: { validateSingleForm(index) { this.$refs[`form${index}`][0].validate(valid => { if (valid) { console.log(`第 ${index + 1} 个表单校验通过`); } else { console.error(`第 ${index + 1} 个表单校验失败`); } }); }, validateAllForms() { const promises = []; // 遍历所有的表单实例并触发校验 for (let i = 0; i < this.formsList.length; i++) { promises.push( new Promise(resolve => { this.$refs[`form${i}`][0].validate(valid => resolve(valid)); }) ); } // 批量等待所有表单校验结果 Promise.all(promises).then(results => { results.forEach((result, idx) => { if (!result) { console.error(`第 ${idx + 1} 个表单校验失败`); } else { console.log(`第 ${idx + 1} 个表单校验通过`); } }); if (results.every(Boolean)) { console.log('所有表单均校验通过'); } else { console.error('存在未通过校验的表单'); } }); } } }; </script> ``` --- #### 关键点解析 1. **动态绑定 `ref`** - 每个 `el-form` 的 `ref` 属性被设置为唯一的字符串（如 `'form' + index`），这样可以在后续操作中精确访问每一个表单实例[^1]。 2. **单独校验某一个表单** - 使用 `$refs` 获取目标表单实例，并调用其内置方法 `.validate()` 进行校验。 - 参数是一个回调函数，在校验完成后会被执行，传递布尔值表示是否通过校验[^2]。 3. **批量校验所有表单** - 将每个表单的校验封装为一个 `Promise`，并通过 `Promise.all()` 同时启动所有校验流程。 - 结果以数组形式返回，逐一判断各表单的校验状态。 4. **数据管理** - 数据源由 `formsList` 数组维护，其中每一项包含自身的 `formData` 和其他元信息。 - 此种设计便于扩展和支持复杂场景下的多表单交互[^3]。 --- #### 注意事项 - 若某些表单可能被动态添加或删除，则需同步更新 `formsList` 及对应的 DOM 引用关系。 - 当前示例仅演示基础功能；实际项目中可根据业务需求进一步优化用户体验，比如高亮显示错误表单区域等。 ---