关于view换页导致选择项丢失问题

在ivew组件中，选择某些数据换页然后再切换回去导致所选数据不存在的解决方法。

主要思路：

1、单选时使用ivew table组件中的row属性，将当前row数据存储到数组中（例：数组portTempList)

onSelectChange(selection, row) {
       this.portTempList.push(row);
     },

2、全选时，如果本页数据都未被选择portTempList为空，那么直接将数据存储到portTempList中，如果已经存在已选数据，需要注意一个问题如：本页已经通过单选选择了两个，再在本页点击全选，使用selection属性，那么已经选择的两个数据会再次存入数组，存在重复数据，所以，解决办法是：在将selection数据存储到数组portTempList前时，对数据进行过滤，过滤掉重复的数据再存储

    onSelectAll(selection) {
       if (this.portTempList.length == 0) {
         this.portTempList = [...selection];
       } else {
         selection.forEach((item, index) => {
           item.count = 0;
           this.portTempList.forEach((subItem, subIndex) => {
             if (subItem.portId === item.portId) {
               item.count = 1;
             }
           });
           !item.count && this.portTempList.push(item);
         });
       }
     },

3、取消单个选项时：同样使用row属性，将所选数据与portTempList里面的数据进行比对，如果相同则将此数据从portTempList中删除

onSelectCancel(selection, row) {
       for (let i = 0; i < this.portTempList.length; i++) {
         if (this.portTempList[i].portId == row.portId) {
           this.portTempList.splice(i, 1);
         }
       }
     },

4、全不选：无法通过selection进行控制，selection为所选择的数据无法监听取消掉了哪些数据，而在本页进行取消全选，实则操作的是本页的数据。将后端返回来的本页数据dataList与portTempList中的数据进行比较，如果比较匹配，则删除此数据（删除之后后面的数据会向前移动一下，所以比较的时候会漏掉数据，应该将i进行i-1再进行比较？）

onSelectAllCancel(selection) {
       for (let i = 0; i < this.portTempList.length; i++) {
         for (let j = 0; j < this.dataList.length; j++) {
           if (this.portTempList[i].portId == this.dataList[j].portId) {
             this.portTempList.splice(i, 1);
           }
         }
      }
     },

5、portTempList中为已经选择的数据：将选择的数据设置checked属性为true，显示在页面上打√，在换页的时候触发，换页发送请求得到此页的新数据，将portTempList中的数据与此页的数据进行比较，如果数据匹配，则在此页面上将该数据的checked属性设置为true

        queryPort(this.param).then((res) => {
           if (res) {
             if (res.code === 200) {
               this.loading = false;
               for (let i = 0; i < this.portTempList.length; i++) {
                 for (let j = 0; j < res.data.records.length; j++) {
                   if (this.portTempList[i].portId == res.data.records[j].portId) {                               this.$set(res.data.records[j], "_checked", true);
                   }
                 }
               }
               res.data.records.forEach((item) => {
                 item.updateTime = checkNullDate(item.updateTime, this.format);
                 item.insertTime = checkNullDate(item.insertTime, this.format);                          }); 
              this.total = res.data.total || res.data.records.length;
               this.addDataList(res.data.records);
             } else {
               this.$Message.error(res.message);
             }
           }

在table组件中：分别设置单选，全选，全不选，取消某个选项（common-table为抽离出去的公共组件）

               <common-table
                 @on-select="onSelectChange"
                 @on-select-all="onSelectAll"
                 @on-select-cancel="onSelectCancel"
                 @on-select-all-cancel="onSelectAllCancel"
                 :in-data-list="dataList"
                 :in-columns="emsColums"
                 :in-loading="loading"
                 :in-table-max-height="tableHeight"
               ></common-table>

1、在选择单项时：

在methods中写入相应的方法：onSelectChange

2、全选：

在methods中写入相应的方法：onSelectAll

3、取消选择某一项：

在methods中写入相应的方法：onSelectCancel

4、取消全选：

在methods中写入相应的方法：onSelectAllCancel