### 如何在 el-form 中实现多个表单项的循环校验 为了实现在 `el-form` 表单中对多个表单项进行循环校验，可以利用 Vue 的动态数据绑定功能以及 Element UI 提供的校验机制。以下是完整的解决方案： #### 动态生成表单项并支持校验 当需要对一组类似的表单项进行校验时，可以通过数组来存储这些表单项的数据，并结合模板中的 `v-for` 指令动态渲染它们。 ```vue <template> <div> <el-form :model="form" :rules="rules" ref="form"> <!-- 负责人字段 --> <el-form-item label="负责人：" prop="principal"> <el-input v-model="form.principal"></el-input> </el-form-item> <!-- 循环生成活动列表 --> <div v-for="(activity, index) in form.activities" :key="index"> <el-form-item :label="'活动名称-' + (index + 1)" :prop="'activities.' + index + '.name'" :rules="rules.name" > <el-input v-model="activity.name"></el-input> </el-form-item> <el-form-item :label="'活动主题-' + (index + 1)" :prop="'activities.' + index + '.content'" :rules="rules.content" > <el-input v-model="activity.content"></el-input> </el-form-item> <el-button @click.prevent="removeActivity(index)">删除</el-button> </div> <el-button type="primary" @click="addActivity">新增活动</el-button> <el-button type="success" @click="submitForm">提交</el-button> </el-form> </div> </template> <script> export default { data() { return { form: { principal: "", // 负责人 activities: [ // 初始活动列表 { name: "", content: "" }, ], }, rules: { principal: [ { required: true, message: "请输入负责人", trigger: "blur" }, ], name: [ { required: true, message: "请输入活动名称", trigger: "blur" }, ], content: [ { required: true, message: "请输入活动主题", trigger: "blur" }, ], }, }; }, methods: { addActivity() { this.form.activities.push({ name: "", content: "" }); }, removeActivity(index) { if (this.form.activities.length > 1) { this.form.activities.splice(index, 1); } }, submitForm() { this.$refs["form"].validate((valid) => { if (valid) { alert("提交成功！"); } else { console.log("验证失败"); return false; } }); }, }, }; </script> ``` --- #### 关键点解析 1. **动态生成表单项** - 使用 `v-for` 遍历 `form.activities` 数组，为每个活动创建一对输入框（活动名称和活动主题）。 - 每个表单项都需要设置唯一的 `prop` 属性，用于指定其在校验规则中的路径[^3]。 2. **动态校验规则** - 对于动态生成的表单项，`prop` 值应采用字符串拼接的方式定义，例如 `'activities.' + index + '.name'`[^4]。 - 这样可以确保每个表单项都能被独立校验。 3. **增删操作** - 新增按钮通过向 `form.activities` 数组追加新对象来实现。 - 删除按钮则移除对应索引的对象，但需注意至少保留一条记录以避免界面异常。 4. **整体校验** - 调用 `$refs['form'].validate()` 方法可一次性校验整个表单的所有字段，包括动态生成的部分。 --- #### 注意事项 - 确保 `prop` 属性值与模型绑定路径一致，否则可能导致校验失效。 - 如果初始状态下没有活动条目，则需要提供默认的一条空白记录以便用户编辑。 ---