注:如果在当前的 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. 构建后端第1篇之---springcloud项目依赖分析

    张艳涛写于2021-2-2日 springcloud是springboot工程+cloud依赖,从这个角度来分析,使用springcloud实际上就是添加springcloud的某个以来比如eurek ...

  2. Synology群晖100TB万兆文件云服务器NAS存储池类别 RAID 6 (有数据保护)2021年7月29日 - Copy

    Synology群晖100TB万兆文件云服务器NAS存储池类别 RAID 6 (有数据保护)2021年7月29日 - Copy https://www.autoahk.com/archives/367 ...

  3. GooseFS助力大数据业务数倍提升计算能力

    前言 GooseFS是由腾讯云推出的一款分布式缓存方案,主要针对包括需要缓存加速的数据湖业务场景,提供基于对象存储COS服务的近计算端数据加速层. GooseFS 基于开源大数据缓存方案 Alluxi ...

  4. 你的ES数据备份了吗?

    前言: 无论使用哪种存储软件,定期的备份数据都是重中之重,在使用ElasticSearch的时候,随着数据日益积累,存放es数据的磁盘空间也捉襟见肘, 此时对于业务功能使用不到的索引数据,又不能直接删 ...

  5. netty系列之:对聊天进行加密

    目录 简介 PKI标准 各类证书的后缀和转换 netty中启动SSL server netty中启动SSL client 总结 简介 在之前的文章中,我们讲到了怎么使用netty建立聊天室,但是这样的 ...

  6. Python--数据存储

    新建测试文档测试.txt内容如下: 张三:今天天气真好. 李四:是的,真的太好了. 张三:阳光明媚. 李四:鸟语花香. 王五:装逼现场:请带好安全帽 张三:难得好天气,今天就不偷懒了. 李四:能把乞讨 ...

  7. 慕慕生鲜上线&&腾讯云服务器配置准备

    1.购买服务器并配置环境 1.1 购买 618购买了腾讯云服务器三年最低配置(1核2G 1Mbps 50G云盘),一时激动忘记了购买前领优惠券,痛失25元. 1.2 环境配置 系统是 CentOS L ...

  8. MySQL记录之间是单向链表还是双向链表?

    前言 本文的观点是基于MySQL使用Innodb存储引擎的情况下进行的! 很多渠道说:MySQL数据按照主键大小依次排列,记录之间是双向链表连起来.如果说我告诉你这种说法很大程度上是错的,你肯定说我在 ...

  9. win7环境下配置JDK&&安装Weblogic12.2.1.4.0

    win7环境下安装Weblogic12.2.1.4.0 写在前面 最近因为想复现一下weblogic的CVE-2020-2555和CVE-2020-2883漏洞,需要weblogic环境,但是vulh ...

  10. (五)Linux之文件与目录管理以及文本处理

    Linux之文件与目录管理 目录 Linux之文件与目录管理 前言 绝对路径与相对路径说明: 一.目录常用命令 常用处理目录的命令: 切换目录 cd 显示当前路径 pwd 查看目录下文件 ls 创建目 ...