vue中v-for循环数组使用方法中splice删除数组元素(错误:每次都删掉点击的下面的一项)

总结:平常使用v-for的key都是使用index,这里vue官方文档也不推荐,这个时候就出问题了,我们需要key为唯一标识,这里我使用了时间戳(new Date().getTime())处理比较复杂的情况,
本文章参考 链接: https://www.jb51.net/javascript/29041834i.htm
效果图:
在这里插入图片描述

在这里插入图片描述

disabled 上传完一张图片之后,把上传‘+’样式隐藏 详见:vue element-ui v-for循环el-upload上传图片 动态添加、删除

//disabled 上传完一张图片之后,把上传‘+’样式隐藏  详见:[vue element-ui v-for循环el-upload上传图片 动态添加、删除](https://blog.csdn.net/sumimg/article/details/132620328)
<el-form-item label="资源列表:"><div class="ziyuan" flex v-for="(item, indexes) in  addList " :key="item.idxxx"><div style="margin-top: 9px;"><el-upload :action="domins + '/common/upload'":class="{ disabled: item.uploadDisabled }" list-type="picture-card":before-upload="beforeUploadOne" :on-preview="handlePictureCardPreview":on-remove="handleRemove.bind(null, { 'index': indexes, 'data': item })":on-success="handleAvatarSuccess.bind(null, { 'index': indexes, 'data': item })":on-change="handleChange.bind(null, { 'index': indexes, 'data': item })":file-list="item.fileList" accept="image/png, image/jpeg"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="item.dialogImageUrl" alt=""></el-dialog></div><div class="yasuo" flex="cross:center"><div><div style="height: 68px;"><el-upload ref="uploadzip" :action="domins + '/common/upload'":on-remove="handleRemoveZip":on-success="handleAvatarSuccessZip.bind(null, { 'index': indexes, 'data': item })":on-change="handleChangeZip" :file-list="item.fileListZip":auto-upload="true" accept=".zip,.rar,.ab" :limit="1"><el-button size="small" type="primary">选择压缩包</el-button></el-upload></div><div class="banben" v-show="addmu == 1 || jzyFlag == 2">版本号{{item.versions ? item.versions : '1.0.0' }}</div></div></div><div class="airadio"><el-radio-group v-model="item.way"><el-radio :label="0">Android</el-radio><el-radio :label="1">ios</el-radio></el-radio-group></div><div style="margin-top: 11px;"><i class="el-icon-circle-plus-outline" style="color: #264E71;"@click="plusOne(indexes)"></i><i class="el-icon-remove-outline" style="color: #264E71;" v-show="addList.length > 1"@click="removeOne(indexes, item.id, item)"></i></div></div></el-form-item>

压缩文件 imageConversion 详见: vue+elementUI 上传图片时压缩图片

<script>
import * as imageConversion from 'image-conversion';
export default {components: {  },data() {return {addList: [{id: 0,uploadDisabled: false,album: '',zip: '',way: 0,idxxx: 0// fileList: [],// fileListZip: []}],}}
}
</script>

删除某一项 idxxx作为唯一标识,因为需求原因 在没添加时间戳(new Date().getTime())之前是没有唯一标识的

//再后面添加一项,idxxx作为唯一标识,因为需求原因 在没添加时间戳之前是没有唯一标识的plusOne() {this.addList.push({id: 0,uploadDisabled: false,album: '',zip: '',way: 0,idxxx: new Date().getTime()})
},
removeOne(index, id, item) {
//使用唯一标识删除this.addList = [...this.addList.filter(e => e.idxxx !== item.idxxx)]
},

下面是其他的上传文件的方法

// 模板图片
beforeUploadOne(file) {console.log(file.size, '压缩前');const isJpgOrPng =file.type === "image/jpeg" || file.type === "image/png";const isLt1M = file.size / 1024 / 1024 < 1;console.log(file.size / 1024 / 1024, 'isLt1M==');if (file.size / 1024 / 1024 > 2 || file.size / 1024 / 1024 == 2) {this.$message.error("上传图片不能超过2M");return false;}if (!isJpgOrPng) {this.$message.error("上传图片只能是 JPG 或 PNG 格式!");return false;}return new Promise((resolve) => {// 小于1M 不压缩// if (isLt1M) {//     resolve(file)// }// 压缩到600KB,这里的600就是要压缩的大小,可自定义imageConversion.compressAccurately(file, 600).then((res) => {console.log(res, '-----res====');resolve(res);});});
},
handlePictureCardPreviewOne(file) {console.log(file, 'file');this.dialogImageUrlOne = file.url;this.dialogVisibleOne = true;
},
handleRemoveOne(file, fileList) {console.log(file, fileList);this.uploadDisabledOne = false;
},
handleAvatarSuccessOne(res, file) {console.log(res, file, 'res, file');this.dialogImageUrlOne = res.data.fullurlconsole.log(this.dialogImageUrlOne, 'this.dialogImageUrlOne图片路径');
},
uploadSectionFileOne(file, fileList) {if (fileList.length >= 1) {this.uploadDisabledOne = true;}
},
// zip
handleRemoveZip(file, fileList) {console.log(file, fileList, '移走路径');
},
handleAvatarSuccessZip(obj, res, file) {console.log(res, file, 'res, file111');console.log(res.data.fullurl, '压缩包路径')this.zip_file = res.data.fullurllet imgList = this.addListlet index = obj.index;this.addList[index].zip = res.data.fullurl},
handleChangeZip(file, fileList) {},

css .disabled

.disabled .el-upload--picture-card {display: none !important;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/76474.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring-Cloud-Openfeign如何做熔断降级?

微服务系统中为了防止服务雪崩问题&#xff0c;服务之间相互调用的时候一般需要开启熔断与降级&#xff0c;下面就来看下feign如何集成hystrix来做熔断与降级。 依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-c…

Full authentication is required to access this resource解决办法

我们在使用postman调接口时候&#xff0c;有的时候需要权限才可以访问&#xff0c;否则可能会报下面这个错误 {"success": false,"message": "Full authentication is required to access this resource","code": 401,"result&q…

浏览器缓存机制及其分类

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 强缓存&#xff08;Cache-Control 和 Expires&#xff09;⭐ 协商缓存&#xff08;ETag 和 Last-Modified&#xff09;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几…

四川百幕晟科技:抖音新店怎么快速起店?

抖音作为全球最大的短视频平台&#xff0c;拥有庞大的用户基础和强大的影响力&#xff0c;成为众多商家宣传产品、增加销量的理想选择。那么&#xff0c;如何快速开店并成功运营呢&#xff1f;下面描述了一些关键步骤。 1、如何快速开新店&#xff1f; 1、确定产品定位&#x…

docker配置nginx,并部署多个项目

前言 基于开发需要需要使用Docker安装nginx&#xff0c;并部署多个前端项目。 1、docker安装nginx容器 docker pull nginx# 挂载项目静态资源和配置文件 docker run --name nginx -p 8088:8088 \ -v /ruoyi/nginx/html:/usr/share/nginx/html \ -v /ruoyi/nginx/conf/nginx…

JVM GC垃圾回收

一、GC垃圾回收算法 标记-清除算法 算法分为“标记”和“清除”阶段&#xff1a;标记存活的对象&#xff0c; 统一回收所有未被标记的对象(一般选择这种)&#xff1b;也可以反过来&#xff0c;标记出所有需要回收的对象&#xff0c;在标记完成后统一回收所有被标记的对象 。它…

geopandas笔记:汇总连接两个区域的边

比如这样的两个区域&#xff0c;我们想知道从蓝到绿、从绿到蓝都有哪些边 1 读取openstreetmap import osmnx as ox import geopandas as gpdGox.graph_from_place(Singapore,simplifyTrue,network_typedrive)ox.plot_graph(G) 2 得到对应的边的信息 nodes,edgesox.graph_to_…

基于Spring Boot的酒店客房管理系统

文章目录 项目介绍主要功能截图:后台:前台部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring Boot的酒店客房管…

一键切换开发环境

一键切换开发环境 在我们正常开发中&#xff0c;经常会遇到切换代理环境的问题&#xff0c;总不能每次切换的时候都需要重启吧 解决方案&#xff1a; 1.1 利用host解决代理问题&#xff0c;代码如下 devServer: {proxy: 127.0.0.1,...}1.2. 需要有起一个node 服务 &#xff…

Spring Bean 的作用域(Bean Scope)

前言 大家好&#xff0c;我是 god23bin&#xff0c;今天我们来聊一聊 Spring 框架中的 Bean 作用域&#xff08;Scope&#xff09;。 什么是 Bean 的作用域&#xff1f; 我们在以 XML 作为配置元数据的情况下&#xff0c;进行 Bean 的定义&#xff0c;是这样的&#xff1a; …

标准C++day3——构造、析构函数和初始化列表

一、面向对象和面向过程 面向过程&#xff1a; 关注如何解决问题&#xff0c;以及解决问题的步骤 面向对象&#xff1a; 关注的解决问题的"人"-"对象"&#xff0c;以及实现能解决问题的"对象" 抽象&#xff1a;先找出(想象)能解决问题的"对…

正中优配:股票出现xd是好还是坏?

近年来&#xff0c;股票市场的日渐成熟和开展使得出资者们关于股票价格的涨跌也愈加灵敏&#xff0c;特别是股票呈现XD之后&#xff0c;更是引起了一系列热议。那么&#xff0c;股票呈现XD是好还是坏&#xff1f;本文将从多个角度进行剖析。 首要&#xff0c;需要清晰XD的定义…

2023年9月制造业NPDP产品经理国际认证报名来这错不了

产品经理国际资格认证NPDP是新产品开发方面的认证&#xff0c;集理论、方法与实践为一体的全方位的知识体系&#xff0c;为公司组织层级进行规划、决策、执行提供良好的方法体系支撑。 【认证机构】 产品开发与管理协会&#xff08;PDMA&#xff09;成立于1979年&#xff0c;是…

设计模式-命令模式

文章目录 前言命令模式简介命令模式的示例代码命令模式使用场景命令模式优缺点 前言 命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;用于将请求发送者和请求接收者解耦&#xff0c;使得可以在不同的上下文中灵活地传递请求&#xff0c;记录…

Gin中的Cookie和Session的用法

Gin中的Cookie和Session的用法 文章目录 Gin中的Cookie和Session的用法介绍Cookie代码演示 Session代码展示 介绍 cookie 和 session 是 Web 开发中常用的两种技术&#xff0c;主要用于跟踪用户的状态信息。 Cookie func (c *Context) Cookie(name string, value string, max…

java Math类中的random方法和Random类中方法的区别

文章目录 Math类中的random()方法Random类 Math类中的random()方法 Math类中的random()方法没有参数&#xff0c;它会默认返回等于0.0、小于1.0的double类型随机数。对double()方法返回的数字稍加处理&#xff0c;即可实现任意范围随机数的功能 public class MathTest {publi…

vue 前端 问题整理

列表显示字典数据 template里面的vue代码 <el-table-column label"性别" align"center" prop"sex"><template #default"scope"> <!-- <dict-tag :optionssysUserSex :value"scope.row.sex&quo…

Redis持久化、主从与哨兵架构详解

Redis持久化 RDB快照&#xff08;snapshot&#xff09; 在默认情况下&#xff0c; Redis 将内存数据库快照保存在名字为 dump.rdb 的二进制文件中。 你可以对 Redis 进行设置&#xff0c; 让它在“ N 秒内数据集至少有 M 个改动”这一条件被满足时&#xff0c; 自动保存一次数…

【Linux】让笔记本发挥余热,Ubuntu20.04设置WiFi热点

Ubuntu20.04设置WiFi热点 由于卧室距离客厅较远&#xff0c;wifi信号太弱&#xff0c;体验极差。鉴于卧室的笔记本电脑是通过网线连接的客厅路由器&#xff0c;因此考虑将这台老破笔记本作为“路由器”&#xff0c;以便发挥它的余热。实验证明&#xff0c;上网速度提升数十倍&a…

Kubectl 使用详解——k8s陈述式资源管理

目录 一、kubectl 简介 二、kubectl 的使用 1.基础用法 &#xff08;1&#xff09;配置kubectl自动补全 &#xff08;2&#xff09;查看版本信息 &#xff08;3&#xff09;查看资源对象信息 &#xff08;4&#xff09;查看集群信息 &#xff08;5&#xff09;查看日志…