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

news2025/3/1 2:57:06

总结:平常使用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.fullurl
    console.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.fullurl


    let imgList = this.addList
    let 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.coloradmin.cn/o/998785.html

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

相关文章

string类的模拟实现——模拟的技巧

前言 对于学习STL而言&#xff0c;最重要的手段之一就是亲手模拟实现一个自己的容器。string存储只为char类型&#xff0c;且操作上并没有很难的操作。因此对于初学者而言&#xff0c;string是一个很好的练手项目。 一、确定思路 虽说相对适合初学者模拟实现&#xff0c;但是…

.net 7 隐藏swagger的api

1.写一个隐藏接口特性表示 using Microsoft.AspNetCore.Mvc.ApiExplorer; using Microsoft.OpenApi.Models; using Swashbuckle.AspNetCore.SwaggerGen;using System.Web.Http.Description;namespace JiaTongInterface.Filter {public class SwaggerApi : Swashbuckle.AspNet…

信息系统项目管理教程(第4版):第二章 信息技术及其发展

请点击↑关注、收藏&#xff0c;本博客免费为你获取精彩知识分享&#xff01;有惊喜哟&#xff01;&#xff01; 第二章 信息技术及其发展 2.1信息技术及其发展 信息技术是以微电子学为基础的计算机技术和电信技术的结合而形成的&#xff0c;对声音的、图像的、文字的、数字…

觉非科技数据闭环系列 | BEV感知研发实践

随着自动驾驶迈向量产场景&#xff0c;“BEV感知数据闭环”已成为新一代自动驾驶量产系统的核心架构。数据成为了至关重要的技术驱动力&#xff0c;发挥数据闭环的飞轮效应或将成为下半场从1到N的胜负关键。 觉非科技在此方面已进行了大量的研究工作&#xff0c;并在实际量产项…

【LeetCode-简单题】69. x 的平方根

文章目录 题目方法一&#xff1a;二分查找 题目 方法一&#xff1a;二分查找 假设求8的平方根&#xff0c;那就设置left 0 &#xff0c;right 8&#xff1b; 每次取最中间的元素的平方和8对比&#xff0c;如果大于8&#xff0c;则right mid-1&#xff0c;如果小于8 left mi…

大数据是什么?看完这个就明白了【电商大数据分析与电商API】

什么是大数据&#xff1f; 在互联网技术发展到至今阶段&#xff0c;大量日常、工作等事务产生的数据都已经信息化&#xff0c;人类产生的数据量相比以前有了爆炸式的增长&#xff0c;以前传统的数据处理技术已经无法胜任&#xff0c;需求催生技术&#xff0c;一套用来处理海量数…

PIONEER MAGNETICS PM3326B-6-1-2-E 80026-529-01 电源

输出功率&#xff1a;该电源模块通常具有特定的输出功率&#xff0c;用于供电其他设备和系统。输出功率可能在规格表中列出。 电压和电流范围&#xff1a;通常&#xff0c;该电源模块可以提供一定范围内的输出电压和电流&#xff0c;以满足不同设备的需求。这些参数通常在技术…

迅为i.MX8mm小尺寸商业级/工业级核心板

尺寸&#xff1a; 50mm*50mm CPU&#xff1a; NXP i.MX8M Mini 主频&#xff1a; 1.8GHz 架构&#xff1a; 四核Cortex-A53&#xff0c;单核Cortex-M4 PMIC&#xff1a; PCA9450A电源管理PCA9450A电源管理NXP全新研制配&#xff0c;iMX8M的电源管理芯片有六个降压稳压器、五…

C语言经典100例题(44)--学习使用extern的用法。

目录 题目 问题分析 代码 运行结果 题目 题目&#xff1a;学习使用extern的用法。 问题分析 extern int i&#xff1b; //定义全局变量 i 上述代码语句&#xff0c;extern告诉编译器&#xff0c;变量i是在程序中的其他位置定义的&#xff08;很有可能是在不同的源文件中…

自定义Dynamics 365实施和发布业务解决方案 - 7. 报表

在每个组织中,决策者都依赖于各种报告来推动业务取得成功。因此,每个软件开发项目都需要开发报告,Dynamics365配备了最先进的报告功能。这些报告的范围从简单的查询到具有复杂查询的更高级的报告。此外,Dynamics365的一个关键功能是其仪表板功能,它提供了一些不错的数据可…

防雷检测综合技术方案

雷电是一种自然现象&#xff0c;具有极高的电压、电流和能量&#xff0c;对人类的生命财产安全构成严重威胁。为了有效地防止或减轻雷电灾害的危害&#xff0c;建筑物需要安装合理的防雷装置&#xff0c;以拦截或引导雷电流&#xff0c;保护建筑物内部的人员和设备。然而&#…

戳泡泡小游戏

欢迎来到程序小院 戳泡泡 玩法&#xff1a; 鼠标点击上升的起泡泡&#xff0c;点击暴躁记录分数&#xff0c;不要让泡泡越过屏幕&#xff0c;共有三次复活生命&#xff0c;会有随机星星出现&#xff0c;点击即可暴躁全屏哦^^。开始游戏https://www.ormcc.com/play/gameStart/1…

【笔试强训选择题】Day39.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff…

深圳寄墨西哥专线国际快递详解

随着全球贸易的不断发展&#xff0c;国际快递服务的需求也越来越大。深圳这座中国的特区城市&#xff0c;不仅是全球电子产品供应链的重要节点&#xff0c;也是国际快递服务的中心之一。对于那些需要将物品从深圳邮寄到墨西哥的人来说&#xff0c;深圳邮寄到墨西哥专线是他们不…

记录在windows下安装MySQL所遇到的各种坑

1.下载 从官网下载installer 然后开始选择要安装的组件 安装了很久进度都是0&#xff0c;无奈点击show detail以后发现&#xff0c;webclient异常&#xff0c;最后是将链接地址复制到迅雷才成功下载的 等迅雷下载完成以后&#xff0c;会看到有如下2个新msi文件 msi都是windows…

手机照片怎么拼图?分享几种拼图小技巧

当我们有很多照片想要展示&#xff0c;但是单独的每一张照片都不足以表达我们想要传达的信息时&#xff0c;我们会把这些照片拼在一起&#xff0c;以形成一张照片墙或者一张拼贴画。这样不仅可以更好地展示我们想要表达的内容&#xff0c;还可以在视觉上创造出更多的艺术效果和…

100个ArcGIS属性查询公式

这里说的ArcGIS属性查询公式&#xff0c;其本质是在ArcMap中通过属性分析查询数据时&#xff0c;为数据库的SQL查询语句构建查询条件。 因此&#xff0c;这里所谓的查询公式&#xff0c;其实是查询条件&#xff0c;希望它能在你处理地图数据的工作中&#xff0c;为你提升些许工…

微服务架构的现状与未来:服务网格与云原生趋势解析

文章目录 微服务架构的崛起服务网格的崭露Istio和EnvoyLinkerd 云原生技术的崭露KubernetesHelm 未来趋势更强大的服务网格更智能的自动化更紧密的云原生集成 结论 &#x1f389;欢迎来到AIGC人工智能专栏~微服务架构的现状与未来&#xff1a;服务网格与云原生趋势解析 ☆* o(≧…

(十一)Springboot+ElasticSearch8整合

前言 在 Elasticsearch7.15版本之后&#xff0c;Elasticsearch官方将它的高级客户端 RestHighLevelClient标记为弃用状态。推出全新的 Java API客户端 Elasticsearch Java API Client&#xff0c;该客户端也将在 Elasticsearch8.0及以后版本中成为官方推荐使用的客户端。 1.导…

【nosql】redis之高可用(主从复制、哨兵、集群)搭建

redis群集有三种模式 redis群集有三种模式&#xff0c;分别是主从同步/复制、哨兵模式、Cluster集群&#xff0c;下面会讲解一下三种模式的工作方式&#xff0c;以及如何搭建cluster群集 ●主从复制&#xff1a;主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主从…