element-ui中el-input出现两个清空图标原因（源码解读）

问题描述：

场景：当外层使用el-form-item时，里面使用el-input时，哪怕里面还嵌套了多层el-form-item。

element-ui源码截图

input.vue

在input.vue组件中有个属性名为validateEvent，同时使用了watch来监听传入的value值，当值发生变化时，会调用this.dispatch('ElFormItem', 'el.form.change', [val])，来通知外层的所有form-item.vue组件

form-item.vue

在addValidateEvents方法中注册了监听：this.$on('el.form.change', this.onFieldChange);这个方法被触发后就会进行表单的校验。导致出现status-icon的图标（其实不是清空图标，是错误标识图标） 代码片段

addValidateEvents() {
    const rules = this.getRules();
    if (rules.length || this.required !== undefined) {
      this.$on('el.form.blur', this.onFieldBlur);
      this.$on('el.form.change', this.onFieldChange);
    }
},

最佳解决方案：

给出现问题的input加上一个属性:validate-event = "false"

<el-input :validate-event="false"/>