• 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();
            }
  • 相关阅读:
    C# 从服务器下载文件
    不能使用联机NuGet 程序包
    NPOI之Excel——合并单元格、设置样式、输入公式
    jquery hover事件中 fadeIn和fadeOut 效果不能及时停止
    UVA 10519 !! Really Strange !!
    UVA 10359 Tiling
    UVA 10940 Throwing cards away II
    UVA 10079 Pizze Cutting
    UVA 763 Fibinary Numbers
    UVA 10229 Modular Fibonacci
  • 原文地址:https://www.cnblogs.com/happybread/p/9374400.html
Copyright © 2020-2023  润新知