zoukankan      html  css  js  c++  java
  • vue+ElementUI项目中,上传控件为必填项,上传图片后清空提示信息

    (ps:以下是我在项目中遇到得问题及解决方法,希望对你们有帮助。如果还有其他方法,可以留言,谢谢)

    一个表单页面,使用element-ui中el-upload上传图片,此项为必填项,然后写了校验规则,当不上传图片时,会提示请上传图片,当上传图片后,提示不会消失;

    代码如下:

     <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();
            }
  • 相关阅读:
    校验字符的表达式
    校验数字的表达式
    Html和xhtml有什么区别
    VUE3.0 + TS 项目实战 (2)基本写法
    VUE3.0 + TS 项目实战 (1)初始化项目
    props传递函数以及$emit触发父组件方法
    rollup
    js函数式编程
    移动端双击事件
    JS节流与防抖
  • 原文地址:https://www.cnblogs.com/happybread/p/9374400.html
Copyright © 2011-2022 走看看