Element ui table selection 分頁支持保存已經選中的數據，同時支持隨時刪除選中的數據，並設置默認選擇
github Element ui table selection 分頁支持保存已經選中的數據，同時支持隨時刪除選中的數據，並設置默認選擇
今天遇到一個需求，有一個表格，這個表格的數據支持翻頁，然后，用戶可以每次選擇數據，選擇之后，下次再回到該頁面時依然和之前一樣的狀態，包括選中和非選中的數據。
我想了下，主要就是兩點：
1、每頁的數據必須一樣。當篩選條件相等時，后端分頁時，進行排序，這樣就可以保證每頁數據都一致了，這個簡單。
2、每次選中后，需要將選中的數據保存，然后再回到該頁面時，將保存的已選中的數據再次設置為選中。問題就出在這一步，我在這一步遇到了問題。
實現默認選擇
其實這個Element UI 官方文檔有寫如何實現默認選中，但是這個demo中默認的是直接使用當前tableData的數據來實現的。而我這里分頁后，數據已經不是tableData里的數據了，然后我發現這樣對於自帶的toggleRowSelection方法實現默認選中時是無法實現的，即使你傳入的obj數據看着k，v都和tableData中的數據一樣，依然是不行的（這里我猜測是數據的空間位置不一樣，而Element UI table 在實現時判斷數據是否存在判斷的是數據存儲的空間位置，而不是判斷k，v，下面例子中，其中的切換第二、三行，我把數據稍微改了下，就是為了證明我的猜測，這個只針對第一頁數據。包括數組的indexOf方法也是同理）。
這里舉例一個上面說到的indexOf的例子：
test = [{a:'b'}, {c:'d'}, {e:'f'}]
//這樣存在
test.indexOf(test[1])
// 1
// 不存在obj數組，其實按照我們的需求判斷，應該是存在的，kv一致
test.indexOf({c:'d'})
// -1
既然不是tableData的數據，無法實現默認選中，那么我們可以傳入tableData的數據呀，這里就需要我們通過保存每一頁選中的數據，然后遍歷tableData，判斷遍歷的到的數據是否和選中的數據相同，如果相同，那么調用toggleRowSelection方法傳入tableData[i]，這樣就能實現默認選中了。具體實現方式就是這樣，就是真正實現的時候需要考慮細節，比較麻煩。
實現代碼Element-table.html
實現效果：
