element form 第三方组件 校验信息未清除修改

前言

故事的开头是起源于测试人员给我提的一个小 BUG 主要是说 element form 校验信息提示后无法进行隐藏，大概长下面这样

就是表单输入项有值了，但我们的错误提示还存在

解决

好了，我们大概知道问题是什么样子了，就一步步来进行对应的排查

0. 检查 rules trigger 事件是否配置正确
1. 是否 element 组件

其实找这种问题思路很简单，在文档上体现不出来解决方案 那我们直接去翻源码好了

首先打开厂库 element 找到 form 组件 packages > form > src > form.vue
我们会发现这个组件只是 form-item 的控制分发中心

打开 form-item.vue 文件

312 注册事件进行监听

我们全局检索一下 el.form.blur 发现element拥有清除提示的组件是因为他们都调用了通知函数

解决办法： 我们只需要对应加上这个通知者就好了

import emitter from 'element-ui/src/mixins/emitter';
mixins: [emitter],
this.dispatch('ElFormItem', 'el.form.change');

在试一下就会发现对应提示消失了