Vue批量删除选中的选项解决方法

莫物

已于 2022-08-22 12:01:58 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-07-27 13:50:53 首次发布

本文链接：https://blog.csdn.net/weixin_45618937/article/details/126013021

这篇博客探讨了在JavaScript中使用splice方法删除数组元素时遇到的问题，即删除过程中数组键值的变化。作者建议在批量删除时采用倒序遍历的方式，先删除索引大的元素，以避免影响后续元素的索引。文章通过一个名为`deleteData`的函数展示了这一解决方案，该函数首先对要删除的元素进行排序，然后倒序遍历并使用splice删除。此外，还提供了一个冒泡排序函数`maopaoSort`来确保元素顺序的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用splice直接删除了数组改变了数组的键值。

所以JS中删除批量删除数组元素时应该倒序删除(意思是先删除索引大的元素，再删除索引小的元素)

因为在删除的过程中数组的索引会变化，如果先删除了小的元素，后面元素的索引都会变化.

deleteData() {
	if(this.selectedIndexs.length == 0){
		this.modalContent = "请选择一条数据";
		this.isShowModal=true;
		return;
	}
	this.maopaoSort(this.selectedIndexs);  //先排序防止顺序不一致
	this.selectedIndexs.reverse();  //倒序解决splice删除数组后改变键值
	this.selectedIndexs.forEach(selectItem => {
		if(this.tableData[selectItem].id != undefined && this.tableData[selectItem].id != null){
			this.delTableData.push(this.tableData[selectItem]);
		}
		this.tableData.splice(selectItem,1);
	})
	this.selectedIndexs.length = 0;
	this.$refs.table.clearSelection();
},
//冒泡排序
maopaoSort(arr){
    for(let i=0;i<arr.length-1;i++){
        for(let j=i;j<arr.length;j++){
            if(arr[i]>arr[j]){
                let changeData = arr[i];
                arr[i] = arr[j];
                arr[j] = changeData;
            }
        }
    }
    return arr;
},