場(chǎng)景：項(xiàng)目中表單添加有圖片上傳的一項(xiàng)硝拧， 而且圖片為必傳項(xiàng)，但是
element的upload組件沒有綁定值
表單檢測(cè)不到
實(shí)現(xiàn)： 這時(shí)可以給該項(xiàng)添加校驗(yàn) 然后用表單的clearValidate方法 在上傳成功后 和 校驗(yàn)成功后手動(dòng)移除該項(xiàng)校驗(yàn)
<el-form ref="ruleForm" :rules="rules" :model="form">
<el-form-item label="車型圖片：" prop="address" ref="ruleImg">
<el-upload
:action="uploadUrl"
accept="image/*"
:limit="1"
list-type="picture"
:on-remove="handleRemove"
:on-success="handleSuccess"
:file-list="form.fileList"
>
<el-button icon="iconfont icon-upload">圖片上傳</el-button>
</el-upload>
</el-form-item>
</el-form>
在date內(nèi)定義rule并添加該項(xiàng)的校驗(yàn)
rules: {
address: [{ required: true, message: "請(qǐng)上傳車型圖片" }]
},
上傳成功后移除方法：
// 上傳成功方法
handleSuccess(response, file, fileList) {
this.$refs.ruleImg.clearValidate();
}
表單提交時(shí)校驗(yàn)移除：
submitForm() {
this.$refs.ruleForm.validate(valid => {
if(this.form.address){//該值判斷圖片是否有值即圖片是否有上傳
this.$refs.ruleImg.clearValidate();
}
if (valid) {
this.saveData();//表單提交
}
});
},
