多选内容的增删改变时序号自动更新

最新推荐文章于 2022-04-22 16:09:47 发布

shinjie1210

最新推荐文章于 2022-04-22 16:09:47 发布

阅读量510

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/shinjie1210/article/details/119574420

版权

本文介绍如何在Vue.js应用中实现多选内容的序号自动更新功能。当用户选择、取消选择、删除单个或批量删除内容时，序号能够实时调整。内容包括模拟数据、添加点击事件、选中/取消选中方法、修正选中数组及图片删除和批量删除方法的编写过程。

摘要由CSDN通过智能技术生成

简单记录下

实现效果

点击多选的内容自带序号，会根据选择的顺序、选择数量自动更新序号，删除单个对象、批量删除选中对象也可自动更新选中序号，如下2图：

模拟数据

首先模拟一组数据，就来个长度30的图片数组吧

imgInit() {
				for (var i = 1; i <= 30; i++) {
					this.imgList.push({
						id: i,
						url: '自定义图片地址',
						name: '图片' + i,
						ischeck: false,
						checkOrder: 0
					})
				}
			},

添加点击事件

然后增加点击事件写一个选中方法，要把v-for遍历的item和index一起传给方法

<el-col :span='6' v-for="(item,index) in imgList" style="margin:10px 0 ;">
 <el-card shadow="hover" class="border" :class="{'border-danger':item.ischeck}"
	style="position: relative;" >
 	<span