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;
		},

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

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值