### 动态触发表单校验的解决方案 在 Element UI 中，当 `el-table` 组件内的数据发生变化时（如新增或删除行），需要确保这些变化能够及时触发父级 `el-form` 的校验机制。以下是具体实现方式。 --- #### 1. **动态绑定表单项路径** 为了使每一条记录都能够被独立校验，必须为 `el-table` 内部的每一列设置唯一的 `prop` 值，并将其映射到 `el-form` 的模型中。 ```html <el-form :model="form" :rules="rules" ref="formRef"> <el-table :data="form.tableData" border style="width: 100%"> <el-table-column label="字段A" width="200"> <template slot-scope="{ row, $index }"> <el-form-item :prop="'tableData.' + $index + '.fieldA'" :rules="rules.fieldA"> <el-input v-model="row.fieldA"></el-input> </el-form-item> </template> </el-table-column> <el-table-column label="字段B" width="200"> <template slot-scope="{ row, $index }"> <el-form-item :prop="'tableData.' + $index + '.fieldB'" :rules="rules.fieldB"> <el-input v-model="row.fieldB"></el-input> </el-form-item> </template> </el-table-column> <el-table-column fixed="right" label="操作" width="150"> <template slot-scope="{ $index }"> <el-button type="text" size="small" @click="deleteRow($index)">删除</el-button> </template> </el-table-column> </el-table> <el-button type="primary" @click="addRow">新增</el-button> <el-button type="success" @click="handleSubmit">提交</el-button> </el-form> ``` 上述代码片段展示了如何将 `el-table` 列中的输入框与 `el-form` 关联起来[^1]。 --- #### 2. **定义校验规则** 在校验规则中，需明确指定每个字段的具体约束条件： ```javascript export default { data() { return { form: { tableData: [] }, rules: { fieldA: [{ required: true, message: '请输入字段A', trigger: 'blur' }], fieldB: [{ required: true, message: '请输入字段B', trigger: 'blur' }] } }; }, methods: { addRow() { this.form.tableData.push({ fieldA: '', fieldB: '' }); // 触发重新校验 this.$nextTick(() => { this.$refs.formRef.validateField(`tableData.${this.form.tableData.length - 1}.fieldA`); this.$refs.formRef.validateField(`tableData.${this.form.tableData.length - 1}.fieldB`); }); }, deleteRow(index) { this.form.tableData.splice(index, 1); // 清除已移除项的校验状态 this.$refs.formRef.clearValidate(); }, handleSubmit() { this.$refs.formRef.validate(valid => { if (valid) { console.log('提交成功:', this.form); } else { console.error('校验未通过'); } }); } } }; ``` 这里的关键在于： - 新增行后立即调用 `validateField` 方法手动触发对应字段的校验。 - 删除行时清理掉旧有的校验状态以防止遗留问题[^2]。 --- #### 3. **注意事项** - 如果遇到因浏览器兼容性引发的布局异常，可通过 CSS 调整 `.el-table` 的单元格样式[^3]。 ```css <style scoped> .el-table .cell, .el-table th div { white-space: normal !important; } </style> ``` - 定义复杂校验逻辑时应避免直接依赖外部变量，推荐封装成独立函数传入[^4]。 --- ###