场景:项目中表单添加有图片上传的一项, 而且图片为必传项,但是
element
的upload
组件没有绑定值
表单检测不到
实现: 这时可以给该项添加校验 然后用表单的clearValidate
方法 在上传成功后 和 校验成功后手动移除该项校验
<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内定义rule并添加该项的校验
rules: {
address: [{ required: true, message: "请上传车型图片" }]
},
上传成功后移除方法:
// 上传成功方法
handleSuccess(response, file, fileList) {
this.$refs.ruleImg.clearValidate();
}
表单提交时校验移除:
submitForm() {
this.$refs.ruleForm.validate(valid => {
if(this.form.address){//该值判断图片是否有值即图片是否有上传
this.$refs.ruleImg.clearValidate();
}
if (valid) {
this.saveData();//表单提交
}
});
},