Element-UI的表单校验问题

校验图片上传组件的时候 我不管使用change还是blur触发规则都无法做到数据变换时提示

image

所以我想到了一个解决办法

在图片上传组件Upload的on-success的方法里面来清除校验

<div class="item">
  <el-form-item label="图片" prop="banners" ref="image">
    <ImgUpload
      :fileList="form.banners"
      @success="success"
      @remove="remove"
    />
  </el-form-item>
</div>
...

// 图片成功方法
success({ uid, url }) {
  this.form.banners.push({
    uid,
    url,
  })
  this.$refs.image.clearValidate()
}

// 图片删除方法
remove(item) {
  const index = this.form.banners.findIndex(({ url }) => url === item)
  this.form.banners.splice(index, 1)
  // 在删除图片时再校验一次
  this.$refs.form.validateField('banners')
}

这样就能完美解决无法实时校验图片上传问题

image