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.rhkb.cn/news/132786.html

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

相关文章

解决虚拟机重启后ifconfig看不到IP的问题

目录 背景 解决方案 背景 虚拟机&#xff0c;桥接模式&#xff0c;启动后一切正常&#xff0c;但重启后发现终端连不上虚机了&#xff0c;也ping不到&#xff0c;最后检查发现&#xff0c;IP消失了&#xff0c;虚机没有IP了。 解决方案 不论是否重启&#xff0c;只要是看不…

【css | loading】各种简单的loading特效

先看一下简单的效果图 线上预览 https://code.juejin.cn/pen/7278511766991339579 代码 HTML <!-- / 1 --><section><div class"sk-rotating-plane"></div></section><!-- / 2 --><section><div class"sk-doub…

【CSS3】

文章目录 1.简介2.边框3.圆角4.背景5.渐变CSS3 径向渐变6.文本效果7.字体8.2D转换9.3D转换10.过渡11.动画12.多列13.用户界面14.按钮 ​ 1.简介 模块 CSS3 被拆分为"模块"。旧规范已拆分成小块&#xff0c;还增加了新的。 一些最重要 CSS3 模块如下&#xff1a; 选…

内网隧道代理技术(二十六)之 搭建ICMP隧道上线CS

搭建ICMP隧道上线CS ICMP隧道原理 ICMP隧道简单实用,是一个比较特殊的协议。在一般的通信协议里,如果两台设备要进行通信,肯定需要开放端口,而在ICMP协议下就不需要。最常见的ping命令就是利用的ICMP协议,攻击者可以利用命令行得到比回复更多的ICMP请求。在通常情况下,…

input 的 placeholder 样式

::placeholder 伪元素 这个伪元素可以改变 input、textarea 占位文本的样式。 input::placeholder {color: green; }完整的兼容性写法&#xff1a; input {&::-webkit-input-placeholder, /* WebKit browsers*/ &:-moz-input-placeholder, /* Mozilla Firefox 4 to …

67、数据源配置 及 配置多个数据源--C3P0 数据源 和 Hikari 数据源

★ Spring Boot如何选择DataSource数据源 优先级从高到低&#xff1a; HikariCP > Tomcat pooling DataSource > Commons DBCP2 如果要使用Tomcat pooling DataSource这种池化数据源&#xff0c; 那么可以用</exclusions>这个把HikariCP 排除掉&#xff0c;然后sp…

16. Docker容器监控CAdvisor+InfluxDB+Granfana

目录 1、前言 2、原始命令 3、CAdvisorInfluxDBGranfana 3.1、什么是CAdvisor 3.2、什么是Influxdb 3.3、什么是Granfana 4、安装使用 4.1、安装influxdb 4.2、安装CAdvisor 4.3、安装Granfana 4.4、访问Influxdb 4.5、创建CAdvisor数据库 4.6、访问CAdvisor 4.7…

评价模型:层次分析法

1. 模型建立 1.1 建立层次结构模型 在深入分析实际问题的基础上&#xff0c;将有关的各个因素按照不同属性自上而下地分解成若干层次&#xff0c;同一层的诸因素从属于上一层的因素或对上层因素有影响&#xff0c;同时又支配下一层的因素或受到下层因素的作用。最上层为目标层…

python集合

集合set set_python1.集合的创建2.集合的相关操作3.集合间的关系4.集合的数学操作5.集合生成式 set_python 集合(set)是一个可变的数据类型&#xff0c;它用于存储一组唯一的元素。集合中的元素是无序的&#xff0c;并且不能重复。可以使用大括号{}或者set()函数来创建一个集合…

C# OpenVino Yolov8 Pose 姿态识别

效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp;namespace OpenVino_Yolov8_Demo {public…

API原理概念篇(六)玩转正则表达式等常用API

一 玩转正则表达式等常用API ① 正则 1、openresty存在两套正则表达式规范1) lua自身独有的正则规范 备注&#xff1a;大约有5%&#xff5e;15%性能损耗损耗原因&#xff1a;表达式compile成pattern,并不会被缓存,每次都会被重新compile编译2) nginx的符合POSIX规范的PCR…

IJK源码分析-android篇

整个IJK播放器框架相较于原始ffplay.c播放器,在三处进行了抽象,分别是: (1)解码器配置初始化操作,对应的数据结构是: struct IJKFF_Pipeline {SDL_Class *opaque_class;IJKFF_Pipeline_Opaque *opaque;void (*func_destroy) (IJKFF_Pipe…

合宙Air724UG LuatOS-Air LVGL API控件-微调框 (Spinbox)

微调框 (Spinbox) 微调框用于数值调整&#xff0c;有时候我们希望获取一个用户输入的数值&#xff0c;但是又不希望弹出键盘&#xff0c;可以使用微调框。 示例代码 -- 回调函数 function spinbox_increment_event_cb(obj, event)if event lvgl.EVENT_SHORT_CLICKED thenlvg…

openssl websockets

1. HTTPS通信的C实现 - 知乎

fluent python part3 一等函数

第 5 章 一等函数 5.1 把函数视作对象 >>> def factorial(n): ... """return n!""" ... return 1 if n < 2 else n * factorial(n - 1) ... >>> factorial(42) 140500611775287989854314260624451156993638400000…

【物联网】简要介绍最小二乘法—C语言实现

最小二乘法是一种常用的数学方法&#xff0c;用于拟合数据和寻找最佳拟合曲线。它的目标是找到一个函数&#xff0c;使其在数据点上的误差平方和最小化。 文章目录 基本原理最小二乘法的求解应用举例使用C语言实现最小二乘法总结 基本原理 假设我们有一组数据点 ( x 1 , y 1 …

pandas读取一个 文件夹下所有excel文件

我这边有个需求&#xff0c;是要求汇总一个文件夹所有的excel文件&#xff0c; 其中有.xls和 .xlsx文件&#xff0c;同时还excel文件中的数据可能还不一致&#xff0c;会有表头数据不一样需要一起汇总。 首先先遍历子文件夹并读取Excel文件&#xff1a; 使用os库来遍历包含子文…

LeetCode 面试题 04.09. 二叉搜索树序列

文章目录 一、题目二、C# 题解 一、题目 从左向右遍历一个数组&#xff0c;通过不断将其中的元素插入树中可以逐步地生成一棵二叉搜索树。 给定一个由不同节点组成的二叉搜索树 root&#xff0c;输出所有可能生成此树的数组。 点击此处跳转题目。 示例 1: 输入: root [2,1,3]…

记录:移动设备软件开发(activity组件)

目录 前言Android简介和发展Android应用的基本组件介绍Activity组件Activity简介Activity的状态和生命周期 小结 前言 移动设备软件开发是指为智能手机、平板电脑等移动设备设计和开发应用程序的过程。移动设备软件开发涉及多种技术、平台和工具&#xff0c;例如Android、iOS、…

9.14号作业

仿照vector手动实现自己的myVector&#xff0c;最主要实现二倍扩容功能 有些功能&#xff0c;不会 #include <iostream>using namespace std; //创建vector类 class Vector { private:int *data;int size;int capacity; public://无参构造Vector(){}//拷贝构造Vector(c…