element 表单校验 当遇到上传组件时的校验添加与移除

场景：项目中表单添加有图片上传的一项， 而且图片为必传项，但是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();//表单提交
        }
      });
    },