### 解决方案 在 Vue 中使用 `Element UI` 的 `el-form` 时，可以通过调用表单实例的方法来清除特定字段的校验信息。具体来说，可以利用 `clearValidate` 方法针对指定字段清除校验状态[^1]。 以下是实现方式的具体代码示例： #### HTML 结构 ```html <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="活动区域" prop="region"> <el-select v-model="form.region" @change="handleRegionChange"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="联动框" prop="linkageField"> <el-input v-model="form.linkageField"></el-input> </el-form-item> </el-form> ``` #### JavaScript 实现逻辑 ```javascript export default { data() { return { form: { region: '', linkageField: '' }, rules: { region: [{ required: true, message: '请选择活动区域', trigger: 'change' }], linkageField: [ { required: true, message: '请输入联动框内容', trigger: 'blur' } ] } }; }, methods: { handleRegionChange() { this.form.linkageField = ''; // 清空联动框的内容 this.$refs['form'].clearValidate('linkageField'); // 清除联动框的校验信息 } } }; ``` #### 关键点解析 1. **绑定事件监听** 当用户改变 `<el-select>` 的值时，触发 `@change` 事件并执行自定义方法 `handleRegionChange`。 2. **清空关联字段的数据** 在 `handleRegionChange` 方法中，通过设置 `this.form.linkageField = ''` 来清空联动框中的数据[^3]。 3. **清除校验信息** 使用 `$refs['form']` 获取到当前表单实例，并调用其 `clearValidate` 方法传入目标字段名 `'linkageField'`，从而清除该字段的校验错误提示[^1]。 --- ###