element-UI 表单图片判空验证问题

element-UI的表单验证似乎并没有覆盖到文件上传上面，当我们需要在表单里验证图片时，就会出现问题。

当图片为空时，点击保存，会出现提示。

但是当我上传图片后，提示并不会随着消失，而是仍然显示着，如下图

如果需要做到正常的表单验证，可以在 on-change 钩子函数里加上表单验证，我的钩子函数叫 upload 。

upload(file, fileList){
    this.$refs.detail.validate(valid => {
        if (valid) {
            // console.log('vue 图片上传钩子函数')
        }
    })
},

这样就可以了。

更新

这样做是有 bug 的，会验证整个表单！如果我不操作表单其他地方，仅上传图片，整个表单其他项也会蹦出来提示内容，如下图

此问题仍待解决

更新2

可以把验证方法修改一下，改为不验证整个表单而是部分表单，把钩子函数的函数体改为

upload(){
    this.$refs.detail.validateField('pictureIds')
}

这样就不会验证整个表单了，但是只有在状态改变时才会验证，如果图片删去是不会去验证的，除非是在on-remove钩子里再来一遍

待解决

此问题仍待解决

更新3

可以把组件再封装一下，给它一个 change 的触发事件，这样 trigger 填成 change 就能有用了。

this.dispatch('ElFormItem', 'el.form.change', params)

此问题就此终结

END~~~≥ω≤

秒客网