el-table中data发生变化原checkbox选中项保留的问题

背景
最近项目中遇到了在一个列表中通过checkbox多选行问题,由于列表数据比较多,会遇到多选对象不好找,因此想通过查询条件筛选出再进行选择,这样就会导致每次查询table的data值都会发生变化,所以需要保证每次查询并且选择完行以后记录前一次的选择的行对象,这样再最终选择完记录以后才会将所有的行对象拿到,问题点就是每次记录上次的查询的选中对象,同事取消选中以后也要再整个选中的对象中取消对应行对象。
解决方案

/**实现el-table中checkbox选择行,问题点在于要求第一次选择的行,再进行查询以后保留原来筛选的结果,最后输出结果为多次查询的结果选中的集合。
		*分为两种可能,第一没有查询通过默认列表选中若干行,另一种就是默认选中行以后,又通过查询重新对table数据进行检索,再通过选中行;
		 * @param {Object} val
		 * @param {Object} row
		 */
		handleSelectionChange(val, row) {
   
			let newVal = val.filter(item => item !== undefined);
			//if (val[0] && val.length > 0) {
   
			if (this.selectionNumber < newVal.length) {
   //针对于第一次加载出来的table数据进行选中,如果selectionNumber小于当前选中的所有行时说明是新增,否则剔除。
				this.multipleSelection = newVal;
				this.multipleSelection = this.multipleSelection.concat(this.selectedDatas); //合并原来的选择项
				let localUser = JSON.parse(window.localStorage.getItem("chatuser"));
				if (localUser) {
   
					this.multipleSelection.push({
   
						displayname: localUser.userName,
						id: localUser.userId
					});
				}
				this.multipleSelection = Array.from(new Set(this.multipleSelection.map(JSON.stringify))).map(JSON
					.parse); //数组去重
			} else {
   //如果对table数据再次进行查询,查询由于selectionNumber发生变化,所以得重新判断当前选中的数据是否存在,存在则剔除,否则加进去
				let inarr = this.multipleSelection.filter((e) => e.id == row.id);
				if (inarr.length > 0) {
    //如果新查询出来的数据再原数组中存在剔除,否则加进去
					this.multipleSelection = this.multipleSelection.filter((e) => e.id != row.id); //取消选择,移除对象
				} else {
   
					this.multipleSelection = newVal;
					this.multipleSelection = this.multipleSelection.concat(this.selectedDatas); //合并原来的选择项
					let localUser = JSON.parse(window.localStorage.getItem("chatuser"));
					if (localUser) {
   
						this.multipleSelection.push({
   
							displayname: localUser.userName,
							id: localUser.userId
						});
					}
					this.multipleSelection = Array.from(new Set(this.multipleSelection.map(JSON.stringify))).map(JSON
						.parse); //数组去重
				}

			}
			//}
			// else {
   
			// 	if(val.length>0){
   
			// 		this.multipleSelection = this.multipleSelection.filter((e) => e.id != row.id); //取消选择,移除对象
			// 	}
			// }

			console.log(this.multipleSelection, 'this.multipleSelection');
			this.groupname = this.multipleSelection.map(list => list.displayname).join(',') + '(' + this
				.multipleSelection.length + ')';
			this.selectedDatas = this.multipleSelection;
			this.selectionNumber = newVal.length;
		},

实现效果
默认选择
在这里插入图片描述
查询以后
在这里插入图片描述
最后结果,所有以前选择的行对象都在,取消不在截图了,一样道理。
在这里插入图片描述
在这里插入图片描述

最近更新

  1. TCP协议是安全的吗?

    2024-01-01 04:32:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-01 04:32:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-01 04:32:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-01 04:32:02       18 阅读

热门阅读

  1. Object-c初步学习 三

    2024-01-01 04:32:02       33 阅读
  2. Prometheus监控Linux

    2024-01-01 04:32:02       39 阅读
  3. vue3 key Attribute 的变化

    2024-01-01 04:32:02       40 阅读
  4. C++导论

    2024-01-01 04:32:02       30 阅读
  5. Django REST framework -10-自定义认证类

    2024-01-01 04:32:02       34 阅读
  6. 【WPF.NET开发】将路由事件标记为已处理和类处理

    2024-01-01 04:32:02       33 阅读
  7. 9、python-闭包

    2024-01-01 04:32:02       42 阅读
  8. 【PostgreSQL如何查看page、index的详细信息】

    2024-01-01 04:32:02       41 阅读
  9. 深入理解SqlSugar ORM框架的使用与实战

    2024-01-01 04:32:02       30 阅读
  10. 【Delphi 基础知识 8】常用的运算符

    2024-01-01 04:32:02       39 阅读
  11. 长度最小的子数组

    2024-01-01 04:32:02       37 阅读
  12. 数据库查询优化

    2024-01-01 04:32:02       39 阅读
  13. PostgreSQL | 概念 | 什么是OLTP&OLAP?

    2024-01-01 04:32:02       39 阅读
  14. 组合设计模式

    2024-01-01 04:32:02       33 阅读
  15. Ant Design Vue表单组件a-form-item-rest使用

    2024-01-01 04:32:02       39 阅读
  16. 如何将Git的语言设置为中文

    2024-01-01 04:32:02       40 阅读
  17. 腾讯云轻量应用服务器测评,2核4G5M配置3年756元

    2024-01-01 04:32:02       37 阅读
  18. 使用函数的选择法排序

    2024-01-01 04:32:02       38 阅读
  19. python的pandas数据分析处理基础学习

    2024-01-01 04:32:02       38 阅读