Element 表单校验中图片上传组件中图片是否上传的校验以及校验后警告信息不消失（其他情况也可参照）

最新推荐文章于 2024-06-03 17:44:32 发布

原创

最新推荐文章于 2024-06-03 17:44:32 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #elementui

在使用 Vue 和 Element UI 进行表单验证时，遇到一个问题：图片上传后，表单验证信息未能自动清除。解决方法是在对应的 `el-form-item` 中添加 `ref`，然后在业务逻辑中通过 `this.$refs[refName].clearValidate()` 来取消校验。

表单校验的过程中会出现表单校验触发成功，但是上传图片后校验信息不会自动消失的情况。如下图

使用 clearValidate()和validate()来进行取消校验和恢复校验。绑定在对应的el-form-item中加上ref 如下

<el-form-item ref="org_user_card_f" label="法人身份证反面照" prop="org_user_card_f">
                    <ImageUpload :limit-num="limitNumCard" :to="'org_user_card_f'" :value="org_form.org_user_card_f" @uploadImages="uploadImages" />
                </el-form-item>

对应的业务处理中使用this.$refs[dataInfo.to].clearValidate()

// 图片上传成功接收图片列表
            uploadImages(dataInfo) {
                this.org_form[dataInfo.to] = dataInfo.value
                if (this.org_form[dataInfo.to].length > 0) {
                    this.$refs[dataInfo.to].clearValidate()
                } else {
                    this.$refs[dataInfo.to].validate()
                }
                // console.log(dataInfo)
                // console.log(this.org_form[dataInfo.to])
            },