(ps:如下是我在項目中遇到得問題及解決方法,但願對大家有幫助。若是還有其餘方法,能夠留言,謝謝)element-ui
一個表單頁面,使用element-ui中el-upload上傳圖片,此項爲必填項,而後寫了校驗規則,當不上傳圖片時,會提示請上傳圖片,當上傳圖片後,提示不會消失;ui
代碼以下:this
<el-form-item label="XXX" ref="image" prop='imageUrl'>
<el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="form.demo" :src="form.demo" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
校驗規則:
imageUrl:[{
required: true,
message: '請上傳',
}]
如何清楚這個提示信息呢?咱們也許會用官網上得這幾行代碼以下:
this.$refs[formName].validate((valid) => {
if (valid) {
} else {
}
});
通過我在項目中,驗證顯然是沒有達到預期得效果。這樣也是會有問題,會影響其餘的校驗內容。通過查詢資料,找到了一個比較好得方法。
想要清空原來上傳圖片下方的提示信息,只須要在上傳組件上綁定ref,在on-success鉤子中調用this.$refs.XXX.clearFiles(),就能夠清除。
代碼以下:
handleAvatarSuccess(res, file) {
this.$refs.image.clearValidate();
}