el-upload上传组件，达到上传数量限制时隐藏上传框？

先上图：

测试今天给提了一个建议，想让上传图片达到限制之后就不展示后面的上传框，看了眼官网的例子：

发给他之后让他选一个我照做，可是需求那边又想要既展示查看删除图标（也就是下面的），又想要不展示上传框（也就是上面的），好吧，直接手动改造一下下面照片墙的情况：

看代码：

<!-- 给上传组件绑定一个动态class，用来隐藏上传框 --><el-uploadref="elUploadTag":action="TagAction":headers="myHeaders":limit="1"list-type="picture-card":multiple="false":on-preview="handlePreviewTag":on-remove="doAfterRemovedTag":before-upload="doBeforeUploadTag":on-exceed="onExceedTag":on-success="doAfterUploadTag":file-list="fileListTag":class="listLengthTag === 1?'hide_box':''"
><i class="el-icon-plus"></i>
</el-upload>

//在data中定义变量listLengthTag = 0data() {return {// 用来判断是否展示上传框listLengthTag: 0};
},

//在on-remove绑定的函数中给listLengthTag实时赋新值doAfterRemovedTag(file, fileList) {this.TagForm.logo = null;// 删除图片把当前图片列表的length赋值给listLengththis.listLengthTag = file.length
}//在on-success绑定的函数中给listLengthTag实时赋新值doAfterUploadTag(resData, file, fileList) {if (resData.code === 200) {this.TagForm.logo = resData.data.id;this.$refs.TagForm.validateField("logo");// 图片上传成功赋值当前列表lengththis.listLengthTag = fileList.length}
}

//在style中编写隐藏上传框的效果<style lang="scss" scoped>
.hide_box{::v-deep.el-upload--picture-card{display: none;}
}
</style>

看效果：

最后，若上传图片在弹窗中或是新的页面中，关闭弹窗以及离开页面记得把listLengthTag重新赋值为0

前端小白积累经验篇~

el-upload上传组件，达到上传数量限制时隐藏上传框？相关推荐

使用 Apache的文件上传组件（common-fileupload）来实现文件的上传
文章目录一.前言/先导二.步骤三.源码四.测试结果五.文件的下载一.前言/先导 maven的依赖: 注意:common-fileupload,它需要依赖于 commons-io组件: &l ...
elementui上传照片超出指定张数之后，隐藏上传框
思路:给el-upload添加css,根据当前上传张数动态使其显示或隐藏. 首先el-upload里面绑定一个占位class: :class="{hide:hideUpload}" ...
win7计算机之间传输文件,win7电脑与电脑之间怎么传大文件_win7电脑断网时怎么相互传大文件...
我们一般传送文件,利用qq.微信.邮箱等.如果碰到断网,手头又没有U盘.那么win7纯净版的两台电脑之间如何互传大文件呢?针对怎么在电脑之间快速传送大文件的问题.爱纯净整理了以下的办法,在局域网内可以 ...
我是如何设计 Upload 上传组件的
Upload 组件设计的目标是解决用户上传文件的便利性,但是中后台 Upload 组件的场景是多种多样的,所以可扩展能力是 Upload 组件不可忽视的另一方面. 同样为了大家能够更加容易的理解,我会 ...
layui upload.render上传组件js动态添加html后再次渲染
页面效果页面代码: <input type="hidden" name="mcBaunell" id="m ...
让asp.net默认的上传组件支持进度条反映(转)
对于web下的上传,实际上更多的时候不用上传太大东西,asp.net默认的上传组件足够用了,美中不足就是没有上传进度反映,所以现在要做的就是在asp.net默认的上传基础上加上进度反映. 关于web上 ...
Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
从零开始编写自己的C#框架（23）——上传组件使用说明
文章导航 1.前言 2.上传组件功能说明 3.数据库结构 4.上传配置管理 5.上传组件所使用到的类 6.上传组件调用方法 7.效果演示 8.小结 1.前言本系列所使用的是上传组件是大神July开发 ...
（转）基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
http://www.cnblogs.com/wuhuacong/p/3343967.html 大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随 ...

el-upload上传组件，达到上传数量限制时隐藏上传框？

el-upload上传组件，达到上传数量限制时隐藏上传框？相关推荐

最新文章

热门文章