### 如何实现 el-form 中对表格内单个输入框的验证并使其在错误时高亮 为了实现在 `el-form` 的表单验证中，当表格内的某个输入框未通过校验时能够高亮显示（即“爆红”），可以按照以下方式设计代码结构。 #### 实现方法 1. **绑定整个表格数据到 form model** 使用 `el-form` 组件包裹整个表格，并将表格的数据绑定到 `el-form` 的 `model` 属性上。这样可以通过统一管理的方式触发表单项的验证逻辑[^1]。 2. **设置 rules 验证规则** 定义针对表格中特定字段的验证规则，在 `rules` 属性中指定对应的校验条件。这些规则会在提交或者失去焦点时被自动调用。 3. **利用作用域插槽传递 row 数据** 在 `<el-table>` 的列配置中使用作用域插槽 (`slot-scope`) 来访问每行的具体数据对象 `scope.row` 并将其作为上下文用于动态生成输入控件[^2]。 4. **手动触发表单项验证** 当需要单独验证某一行或某一列的内容时，可借助 `$refs.form.validateField()` 方法显式执行对应路径下的子项检验过程。 以下是具体实现示例： ```vue <template> <el-form ref="formRef" :model="formData" :rules="rules"> <el-table :data="formData.tableData"> <!-- 显示等级 --> <el-table-column prop="grade" label="范围"></el-table-column> <!-- 自定义评分列 --> <el-table-column label="评分"> <template v-slot="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.rate'" :rules="rules.rate" > <el-input v-model.number="scope.row.rate" @input="(val) => handleInput(val, scope)" ></el-input> </el-form-item> </template> </el-table-column> </el-table> </el-form> </template> <script> export default { data() { return { formData: { tableData: [ { grade: "0-15", rate: null }, { grade: "16-30", rate: null } ] }, rules: { rate: [ { required: true, message: "请输入有效分数", trigger: ["blur", "change"] }, { validator: (rule, value, callback) => { const [min, max] = rule.field.match(/\d+/g).map(Number); if (!value || typeof value !== "number") { callback(new Error("请输入合法数字")); } else if (value < min || value > max) { callback( new Error(`请输入 ${min}-${max} 范围内的数字`) ); } else { callback(); } }, trigger: ["blur", "change"] } ] } }; }, methods: { handleInput(value, scope) { const [min, max] = scope.row.grade.split("-").map(Number); if (!(value >= min && value <= max)) { this.$message({ type: "warning", message: `请输入 ${min}-${max} 范围内的数字` }); this.$refs.formRef.clearValidate(); // 清除之前的验证状态 this.$nextTick(() => this.$refs.formRef.validateField(`tableData.${scope.$index}.rate`) ); // 手动重新验证该字段 } } } }; </script> ``` 此方案的关键在于： - 动态构建 `prop` 值以便关联具体的表单项。 - 结合自定义验证器完成复杂业务逻辑判断。 - 运用手动重置与局部刷新机制确保界面同步更新效果。 --- ###