Element-Table-ToggleRowSelection实现取消选中

业务场景

点击上面的删除联动下面的表格。分页之后删除也会联动下面的表格。(比如我第一页都选中，之后点击第二页。删除第一个也就是删除表格第一页的第一个)

技术支持

@selection-change：当选择项发生变化时会触发该事件(上面的数据就是这个产生的)
toggleRowSelection：用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

问题点

1. 当点击上面的删除，下面的表格并没有联动取消选中
2. 当第一页全选，再第二页全选，在切回第一页再切回第二页，删除第一个(也就是删除第一页第一条数据，表格联动如此)，但是点击时没有删除反而增加，在点又正常

解决问题

我在网上百度了一大堆，他们给的说法是：toggleRowSelection操作的数据和指针有关，我们只能操作当前表格的数据，虽然 toggleRowSelection 传入的 选中的行数据 和表格中的行数据的某一项的数据一模一样，但是它们的指针不同，指向不同内存地址

我当你看懂了这个说法，不懂也得懂，你不会真不懂吧？(简单的来说，它两不是一个东西，虽然长相一样但是住地方不一样)

逻辑

1. 先判断当前页数据有没有当前点击删除的数据，有就删除
2. 当前页没有说明，说明我在其他页删除其他页的数据，判断删除就行

代码

----table----
<p v-for="(item, i2) in multipleSelection2" :key="item.tradeNo">
	<span>{{ item.tradeNo }}</span>
	<span class=" el-icon-close" @click="deleteTradNo(item)"></span>
</p>
<el-table
	ref="createTransferDataRef2"
	:data="createTransferData2"
	tooltip-effect="dark"
	@selection-change="handleSelectionChange2"
	row-key="id"
>
	<el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
	<el-table-column prop="tradeNo" min-width="180" label="交易流水号"></el-table-column>
	<el-table-column prop="op_amount" label="操作金额"></el-table-column>
</el-table>
----table结束---

----js处理----
handleSelectionChange2(val) {
	this.multipleSelection2 = val;
},
deleteTradNo(item) {
	//1. 获取当前页面的:data="createTransferData2"数据的id
	const tableSelectItemId = this.createTransferData2.map(item=>item.id)
	//2. 首先循环当前页的:data="createTransferData2"里的数据进行判断
	for (let i = 0; i < this.createTransferData2.length; i++) {
		if (this.createTransferData2[i].id === item.id) {
			this.$refs.createTransferDataRef2.toggleRowSelection(this.createTransferData2[i]);
		}else {
			//3. 然后在判断@selection-change="handleSelectionChange2"产生的数据
			for(let j = 0; j < this.multipleSelection2.length; j++){
				//4. 判断id是否一样 && 当前页的:data="createTransferData2"里面不能包含其他页的id
				if(this.multipleSelection2[j].id=== item.id && !tableSelectItemId.includes(this.multipleSelection2[j].id)){
					this.$refs.createTransferDataRef2.toggleRowSelection(this.multipleSelection2[j]);
				}
			}
		}
	}
},
---js处理结束---

如果你的业务场景和问题跟我一样，跟着我做就能解决问题！！
记得看解说个注释！！
记得看解说个注释！！
记得看解说个注释！！

有用记得三连！！！拒绝白嫖！！！