html表格 取消选中,element ui ----table表格（带多选框）+分页实现分页选中和分页取消选中...

大概的需求是，把A表格里面选中的数据，赋值到B表格中，当B表格移除某条数据时，A表格中对应的那条数据也应该取消选中。

image.png

image.png

首先遇到的问题是，切换到第二页以后导致第一页选中的数据取消了，解决方法，官方文档有提到，上代码

image.png

image.png

row.supplierguid 是唯一标识，什么id，key等。

再然后遇到的问题就是A表格移除某一项数据以后，B还是选中状态，解决方法如下

官网的最基础是这样

image.png

但是因为我不在同一个表格里，所以我得去找对应的index

delSupplier(index,supplierguid,suppliername) {

this.InvitationData.splice(index, 1); //移除A表格里的某条数据

var sId=this.firstIndex(this.sipplierData,supplierguid) //找A表格与B表格对应的数据

if(sId!= -1){ //因为是分页的，所以跳转到第二页，页面第一页数据就清空了，如果第一页有选中的数据，那么就会找不到，就会报undefined错误，所以此处判断，如果有当前数据，那么进行取消选中

this.$refs.multipleTable.toggleRowSelection(this.sipplierData[sId],false);

}else{ //如果没有，通过查询当前数据，取index为0的就可。

this.SupplierList.supplierName=suppliername;

this.getSupplierList(this.SupplierList); //获取B表格的数据方法

setTimeout(() => { //

this.$refs.multipleTable.toggleRowSelection(this.sipplierData[0],false);

}, 50);

}

}

},

找数组里某条数据的index

firstIndex(arr, text) {

// 若元素不存在在数组中返回-1

let firstVal = -1;

for (let i = 0; i < arr.length; i++) {

// json (arr[i].id == text)

if (arr[i].supplierguid == text) {

firstVal = i;

return firstVal;

break;

}

}

return firstVal;

},