### 解决方案 在 Vue3 中使用 `el-form` 和 `el-table` 结合时，如果希望实现对表格中单个输入框的校验并高亮显示错误提示，而不直接将 `rules` 属性写在 `el-form-item` 上，则可以通过动态绑定 `prop` 字段以及自定义校验逻辑来完成。 以下是具体实现方法： #### 动态绑定 prop 字段 由于 `el-form` 的校验依赖于 `prop` 属性，因此需要为表格中的每一行动态绑定唯一的 `prop` 值。这通常通过字符串模板 `${}` 来实现，例如：`:prop="'list.' + index + '.field'"`[^2]。 #### 自定义校验规则 对于每个需要校验的字段，可以直接在其对应的 `<el-input>` 或其他表单项上绑定 `:rules` 属性，并提供具体的校验规则。这种方式允许针对特定字段设置独立的校验逻辑，而不是在整个表单层面统一管理校验规则。 #### 示例代码 以下是一个完整的示例，展示了如何在不使用 `el-form-item` 的情况下实现单个输入框的校验： ```vue <template> <el-form ref="formRef" :model="formObj"> <el-table :data="formObj.list" border stripe> <!-- 定义表格列 --> <el-table-column label="名称" width="180"> <template #default="scope"> <el-input v-model="formObj.list[scope.$index].name" :prop="'list.' + scope.$index + '.name'" :rules="[ { required: true, message: '请输入名称', trigger: 'blur' } ]" @blur="validateField(scope.$index, 'name')" /> </template> </el-table-column> <el-table-column label="价格" width="180"> <template #default="scope"> <el-input v-model="formObj.list[scope.$index].price" :prop="'list.' + scope.$index + '.price'" :rules="[ { required: true, message: '请输入有效数字', validator: validatePrice, trigger: 'blur' } ]" @blur="validateField(scope.$index, 'price')" /> </template> </el-table-column> </el-table> </el-form> </template> <script> export default { data() { return { formObj: { list: [ { name: '', price: '' }, { name: '', price: '' } ] } }; }, methods: { // 手动触发某个字段的校验 validateField(index, field) { this.$refs.formRef.validateField(`list.${index}.${field}`); }, // 自定义校验函数 validatePrice(rule, value, callback) { if (!/^\d+(\.\d{1,2})?$/.test(value)) { callback(new Error('请输入有效的两位小数')); } else { callback(); } } } }; </script> ``` #### 关键点解析 1. **动态绑定 `prop`** 使用 `:prop="'list.' + scope.$index + '.field'"` 将每行的字段唯一标识出来，以便 `el-form` 能够识别并执行校验[^2]。 2. **手动调用校验** 当用户离开输入框（即触发 `@blur` 事件）时，手动调用 `this.$refs.formRef.validateField()` 方法进行校验[^1]。 3. **自定义校验器** 对于复杂的校验需求，可以编写自定义校验函数并通过 `validator` 属性应用到目标字段上[^2]。 --- ###