首页 技术 正文
技术 2022年11月23日
0 收藏 989 点赞 5,014 浏览 2118 个字
# el-upload上传列表实现 展开 收起
#### 无图言*,所以先上最终效果图(想参考代码的可以直接滑到最后)
### 具体实现思路
注意: 每个人的项目环境以及需求,都不尽相同,所以这里仅仅提供思路.
#### 看看没有收起之前
可以看到,没有实现收起之前,如果一直上传文件,文件列表会一直向下延伸…….
如果需求的上传数量少的话,还可以接受,但是,让我们看看需求
???? 30 张
可见,为了尽可能的减少对页面的影响,只能弄个展开以及收起了!
#### 思考
展开以及收起,无非是控制显示数量,那么我们就要对症下药,先看看什么属性与上传的文件数量有关
这时候我们就要去看 element-ui 的文档了
这里可以看到 file-list 这个属性与我们的上传文件列表有关,那我们就从它下手!
这里我们用 slice() 方法 试试
关键代码:
注意:我这因为有多项附件要上传,所以列表是个数组
相应的每一项是一个item,所以这里item.accessory才是我图片存储的地方
根据你们的实际数据格式看着来,不要完全照抄
“`vue
:file-list=”item.accessory.slice(0, 1)”
“`
随后可以看到,不管我们怎么上传图片,只会显示第一张
那么到这里,我们限制显示数量的需求达到了
然后不要着急,这时候我们先去弄个按钮出来,饭要一口一口吃嘛
关键代码:
“`vue
// textFlg 是我自定的 类似于开关
<div v-show=”item.accessory.length > 1″ class=”more” @click=”res=>{item.textFlg = !item.textFlg}”>
“`
这个按钮的整体思路是,只有上传图片大于1张才显示; 默认显示当前上传的文件数量-1;每当点击之后,切换状态.
之后就能实现这种效果,样式啥的我就不在这里展开了,主要是传递一个思路!
限制显示数量又了,切换效果有了,那么现在就剩展开了!
上面我们这条代码吗?
“`vue
:file-list=”item.accessory.slice(0, 1)”
“`
这里我们将 slice() 方法 的第二个参数 固定成了 1 ; 这样就始终只显示一条!
那么我们要是根据某个状态来切换这个1,不就达到我们想要的展开了嘛?
说干就干!
经过一番摸索之后! 实现了切换显示数量
“`vue
:file-list=”item.accessory.slice(0, item.textFlg ? item.accessory.length : 1)”
“`
这里三元表达式的意思是 textFlg === true 吗? 如果为true 就显示与上传列表数组长度相等的数据 :(否则) 显示1
textFlg 就是我们用来控制按钮文字的状态,所以毫无疑问他们俩可以共用!
至此,我们就实现了如最终效果图的切换
以上,就是大概的实现思路,当然例如样式之类的等等细节,本文都选择直接略过,还请谅解.
最后我会贴出我的所有代码,以及数据格式.
当然,这肯定不是最优解,不过这是我的思路,有别的观点或者解决方案欢迎讨论~
### 仅供参考! 仅供参考! 仅供参考!
我的数据格式:
“`json
details:[
textFlg: false,
]
“`
我的示例源码:
“`vue
<el-upload
ref=”upload”
list-type=”text”
:style=”{ width: item.accessory.length > 1 ? ‘140px’ : ‘100%’ }”
:action=”$store.state.config.uploadConfig.actionUrl”
:headers=”{ Authorization: Bearer ${$store.state.token} }”
:on-preview=”handlePreview”
:auto-upload=”true”
:file-list=”item.accessory.slice(0, item.textFlg ? item.accessory.length : 1)”
:on-success=”
(res, file) => {
return handleSuccess(res, i, file)
}
:on-remove=”handleRemove”
:before-upload=”beforeAvatarUpload”
multiple
:limit=”30″
:on-exceed=”handleExceed”
:disabled=”!isEdit”
>
<div v-show=”item.accessory.length > 1″ class=”more” @click=”more(item)”>
{{ item.textFlg ? ‘收起’ : +${item.accessory.length - 1} }}
“`
样式:
“`css
.more {
margin: 0 0 0 110px;
cursor: pointer;
width: 45px;
height: 20px;
background: #ebeef5;
text-align: center;
border-radius: 5px;
position: absolute;
bottom: 12px;
right: 5px;
}
“`
如果能帮到你,是我最大的荣幸!
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,727
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,331
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,158
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:5,978
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,620
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,639