注:如果在当前的 vue 文件里 写了 style 样式,得 去除 scoped 【私有属性必须去除,不能保留】(这个是重点,不去除不生效),

template 部分

      <el-upload
                            :class = "{disabled:isMax}"  // 通过 class 进行判断,对 upload 进行隐藏
                            action="  上传地址 "
                            list-type="picture-card"
                            accept="image/*"
                            :limit="1"
                            :file-list="ruleForm.productImgs"
                            :multiple="isMultiple"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            :on-exceed="handleExceed"
                            :on-error="imgUploadError">
                            <i class="el-icon-plus"></i>
                        </el-upload>
 
data 部分
image: '',
productImgs: [],
isMultiple: true,
isMax : false, // 关键点,用它来做判断 class 是否追加上去
 
methods 部分
handleAvatarSuccess(res, file) {//图片上传成功
            this.isMax = true // 上传成功进行隐藏
 },
handleRemove(file, fileList) {//移除图片
            this.isMax = false // 删除图片时 恢复显示
 },
 
 
 
 
 
 

vue element-ui 组件上传图片 之后 对上传按钮 进行隐藏,删除之后重新显示的更多相关文章

  1. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  2. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  3. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  4. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  5. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  6. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  7. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  8. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  9. [转]VUE优秀UI组件库合集

    原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...

随机推荐

  1. 谈一下python中的列表

    Python标准库基于C语言实现了丰富的序列类型包括元组,列表,字典... 今天我们只谈list(列表) 1 列表(list) 最基础也是最重要的序列类型,他本身可以存放不同数据类型的元素.列表推导是 ...

  2. element UI+vue关于日期范围选择的操作,picker-options属性的使用

    一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...

  3. []*T *[]T *[]*T 傻傻分不清楚

    前言 作为一个 Go 语言新手,看到一切"诡异"的代码都会感到好奇:比如我最近看到的几个方法:伪代码如下: func FindA() ([]*T,error) { } func F ...

  4. 利用swagger和API Version实现api版本控制

    场景: 在利用.net core进行api接口开发时,经常会因为需求,要开发实现统一功能的多版本的接口.比如版本V1是给之前用户使用,然后新用户有新需求,这时候可以单独给这个用户写接口,也可以在V1基 ...

  5. vsftpd安装配置

    vsftpd安装配置 vsftpd测试服务器: 192.168.1.191 1.安装: yum provides */vsftpd yum install vsftpd -y 2.匿名用户最基本配置( ...

  6. python打包exe之pyinstaller用法

    pyinstaller可以将python写好的脚本打包成exe文件,方便windows用户在没有python环境下运行.这个程序完全跨平台,包括Windows.Linux.Mac OS X等多个操作系 ...

  7. 网络编程之TCP客户端开发和TCP服务端开发

    开发 TCP 客户端程序开发步骤 创建客户端套接字对象 和服务端套接字建立连接 发送数据 接收数据 关闭客户端套接字 import socket if __name__ == '__main__': ...

  8. 【LeetCode】155. 最小栈

    155. 最小栈 知识点:栈:单调 题目描述 设计一个支持 push ,pop ,top 操作,并能在常数时间内检索到最小元素的栈. push(x) -- 将元素 x 推入栈中. pop() -- 删 ...

  9. 跟我一起写 Makefile(十三)

    五.定义模式规则 你可以使用模式规则来定义一个隐含规则.一个模式规则就好像一个一般的规则,只是在规则中,目标的定义需要有"%"字符."%"的意思是表示一个或多个 ...

  10. Java多线程间的数据共享

    下面的程序演示了一个对象被两个线程访问的方法,"monitor.gotMessage();"这一句虽然是monitor对象的方法,但却是运行在"MyObject" ...