一、問題描述：

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

二、解決歷程：

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

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

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

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

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

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

第四點的處理邏輯：

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

????????（2）判斷tableSelectList中的數(shù)據(jù)是否在基準值startCheckList中？

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

? ? ? ????????????????? 如果不在：則將對應(yīng)項push到startCheckList；

? ? ? ? （3）判斷tableNoSelectList中的數(shù)據(jù)是否在基準值startCheckList中？

? ? ? ? ? ? ? ? ? ? ? ? 如果在：則將對應(yīng)的項從startCheckList中splice出來；

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

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

三：代碼片段

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

1、table

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

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

// 進行選中。入?yún)⑹切械哪莻€對象
setDefaultSelection (rows) {
    rows.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row);
    });
},

3、首次加載獲取已選中數(shù)據(jù)

// 頁面初始獲取選中數(shù)據(jù)
const checkList = elementList.filter(ele => {
    if (insertIdList.indexOf(ele.id) > -1) {
        return true;
    } else {
        return false;
    }
});
// 如果通過深拷貝得到startCheckList，則會在對比中導(dǎo)致每一項對象始終與checkList中不同
// 采用淺拷貝，可以保證數(shù)組中每一項地址是相同的，則后續(xù)不需要去重操作
// 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數(shù)據(jù)之后重新回顯選中項

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