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.hqwc.cn/news/101430.html

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

相关文章

OSPF路由协议

OSPF基本信息 OSPF&#xff08;Open Shortest Path First&#xff09;开放式最短路径优先协议是用于网际协议&#xff08;IP&#xff09;网络的链路状态路由协议。该协议使用链路状态路由算法的内部网关协议&#xff08;IGP&#xff09;&#xff0c;在单一自治系统&#xff08…

算法通关村-----快速排序的应用

数组中的第K个最大元素 问题描述 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。详见leetcode215 问题分析 之前我们已经使用堆排序/堆查找的…

在CentOS7中,安装并配置Redis【个人笔记】

一、拓展——Ubuntu上安装Redis 输入命令su --->切换到root用户【如果已经是&#xff0c;则不需要进行该操作】apt search redis --->使用apt命令来搜索redis相关的软件包【查询后&#xff0c;检查redis版本是否是你需要的&#xff0c;如果不是则需要看看其他资料~】ap…

安卓10创建文件夹失败

最近在做拍照录像功能&#xff0c;已经有了文件读写权限&#xff0c;却发现在9.0手机上正常使用&#xff0c;但是在安卓12系统上根本没有创建文件夹。经过研究发现&#xff0c;创建名称为“DCIM”的文件夹可以&#xff0c;别的又都不行。而且是getExternalStorageDirectory和ge…

OpenCV基本操(IO操作,读取、显示、保存)

图像的IO操作&#xff0c;读取和保存方法 1.1 API cv.imread()参数&#xff1a; 要读取的图像 读取图像的方式&#xff1a; cv.IMREAD*COLOR:以彩色模式加载图像&#xff0c;任何图像的图像的透明度都将被忽略。这是默认参数 标志&#xff1a; 1 cv.IMREAD*GRAYSCALE :以…

由Qt::BlockingQueuedConnection引起的关闭Qt主页面而后台仍有进程残留

BUG&#xff1a;由Qt::BlockingQueuedConnection引起的关闭Qt主页面而后台仍有进程残留 1、错误代码示例 首先我们看下下面的代码&#xff0c;可以思考一下代码的错误之处 /** BlockingQueueDeadLock.h **/ #pragma once#include <QtWidgets/QMainWindow> #include &q…

【C刷题训练营】第三讲(c语言入门训练)

前言: 大家好&#xff0c;我决定日后逐渐更新c刷题训练营的内容&#xff0c;或许能帮到入门c语言的初学者&#xff0c;如果文章有错误&#xff0c;非常欢迎你的指正&#xff01; &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&…

Linux命令200例:Yum强大的包管理工具使用(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0…

MindsDB为许多不支持内置机器学习的数据库带来了机器学习功能

选择平台的首要原则是“靠近数据”,让代码靠近数据是保持低延迟的必要条件。 机器学习,特别是深度学习往往会多次遍历所有数据(遍历一次被称为一个epoch)。对于非常大的数据集来说,理想的情况是在存储数据的地方建立模型,这样就不需要大量的数据传输。目前已经有部分数据…

不用额外插件?RunnerGo内置压测模式怎么选

我们在做性能测试时需要根据性能需求配置不同的压测模式如&#xff1a;阶梯模式。使用jmeter时我们需要安装插件来配置测试模式&#xff0c;为了方便用户使用&#xff0c;RunnerGo内嵌了压测模式这一选项&#xff0c;今天给大家介绍一下RunnerGo的几种压测模式和怎么根据性能需…

手写Spring:第19章-JDBC功能整合

文章目录 一、目标&#xff1a;JDBC功能整合二、设计&#xff1a;JDBC功能整合三、实现&#xff1a;JDBC功能整合3.1 工程结构3.2 整合JDBC功能核心类图3.3 数据源操作3.3.1 数据源操作抽象类3.3.2 JDBC 工具类 3.4 数据库执行3.4.1 语句处理器接口3.4.2 结果处理器接口3.4.3 行…

你参与的APP开发项目安全吗?

Android将安全设计贯穿系统架构的各个层面&#xff0c;覆盖系统内核、虚拟机、应用程序框架层以及应用层各个环节&#xff0c;力求在开放的同时&#xff0c;也恰当保护用户的数据、应用程序和设备的安全。Android安全模型主要提供以下几种安全机制&#xff1a; 进程沙箱隔离机…