一、問題描述：

? ? ? ? 表格數據是一次性從后端獲取到了全部的數據（可前端假分頁），在模糊檢索表格數據時，因為el-table的數據源data發生了變化，重新觸發了@selection-change事件，此時如果僅僅是在@selection-change事件對應的方法中對回顯的選中項（獲取到表格數據要回顯的選中項目）進行賦值，會導致選中項被清空，無法保留之前的選中項。

二、解決歷程：

????????我想大家的想法應該和我的差不多，對初始的選中項進行記錄，隨后再進行回顯以及數據改變的處理邏輯，沒錯，我就是這樣寫的，但是它失敗了，無論我在@selection-change事件的對應方法中寫了多少處理邏輯，換了多少種處理方式，都始終繞不過data改變@selection-change觸發而參數為空數組的這一個坎兒。至此一個小時已經過去了......

? ? ? ? 隨后我思考了一個問題，在@selection-change處理函數中既然我沒有辦法對選中的數據進行處理，那么我可不可以在外邊進行處理呢？實踐得真知：

????????1、記錄列表加載時表格數據的選中項（因為我的表格數據是一次性獲取到的，也沒有做分頁，所以可以一次獲取所有）；

????????2、定義一個變量checkList來保存每次@selection-change觸發時接受到的選中項參數，并且使用它來回顯表格選中項；

? ? ? ? 3、startCheckList來作為基準值；

? ? ? ? 4、在提交和查詢時對startCheckList結合進行checkList處理（重點）

第四點的處理邏輯：

????????（1）在當前展示的table數據中篩選出在checkList中的所有數據以及不在checkList中的所有數據，組成兩個數組，分別為：tableSelectList和tableNoSelectList。

????????（2）判斷tableSelectList中的數據是否在基準值startCheckList中？

????????????????????????如果在：則不做任何操作

? ? ? ????????????????? 如果不在：則將對應項push到startCheckList；

? ? ? ? （3）判斷tableNoSelectList中的數據是否在基準值startCheckList中？

? ? ? ? ? ? ? ? ? ? ? ? 如果在：則將對應的項從startCheckList中splice出來；

? ? ? ? ? ? ? ? ? ? ? ? 如果不在：則不做任何操作

? ? ? ? （4）在處理完基準值startCheckList后，使用它對下一次表格篩選后進行回顯。

三：代碼片段

因為項目實際場景不同，主要還是參考以上第二點解決歷程中的描述。所以僅貼上部分代碼。

1、table

<el-table
    ref="multipleTable"
    :data="elementList"
    border
    height="600"
    @selection-change="handleSelectionChange">

2、選中回顯 （首次加載也要執行，就不碼代碼了）

// 進行選中。入參是行的那個對象
setDefaultSelection (rows) {
    rows.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row);
    });
},

3、首次加載獲取已選中數據

// 頁面初始獲取選中數據
const checkList = elementList.filter(ele => {
    if (insertIdList.indexOf(ele.id) > -1) {
        return true;
    } else {
        return false;
    }
});
// 如果通過深拷貝得到startCheckList，則會在對比中導致每一項對象始終與checkList中不同
// 采用淺拷貝，可以保證數組中每一項地址是相同的，則后續不需要去重操作
// this.startCheckList = JSON.parse(JSON.stringify(checkList));
this.startCheckList = [ ...checkList ];
this.setDefaultSelection(checkList);
this.checkList = checkList;

4、對startCheckList

// 選中項處理
handleCheckList () {
    console.log(this.checkList);
    this.elementList.forEach(item => {
    // 如果elementList的項目在checkList中，不在startCheckList中則push
        if (this.checkList.includes(item) && !this.startCheckList.includes(item)) {
             this.startCheckList.push(item);
        } else if (!this.checkList.includes(item) && this.startCheckList.includes(item)) {
             this.startCheckList.splice(index, 1);
        }
    });
},

5、獲取到新的data數據之后重新回顯選中項

// 獲取表格數據
// ......
this.$nextTick(()=>{
    this.setDefaultSelection(this.startCheckList);
})