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

实现效果
默认选择
el-table中data发生变化原checkbox选中项保留的问题_第1张图片
查询以后
el-table中data发生变化原checkbox选中项保留的问题_第2张图片
最后结果,所有以前选择的行对象都在,取消不在截图了,一样道理。
el-table中data发生变化原checkbox选中项保留的问题_第3张图片
el-table中data发生变化原checkbox选中项保留的问题_第4张图片

你可能感兴趣的:(vue.js,前端,javascript)