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