通過後臺SQL獲取分頁數據，在使用VUE-Element-Table 表格選擇多行數據時，怎樣在
在項目中，分頁是由後臺SQL獲取。在table表格多選時，容易把選中的值傳給後臺，但是怎樣在返回上一頁時怎樣記住表格多選的數據？？
當返回第二頁時，應該把第一條數據再選中，保持選擇狀態。
具體思路：在頁面不重新刷新加載時，使用二維數組保存el-table表格多選結果。其中一維下標記錄頁碼，二維下標記錄選中的數據。說明：tableLoad（）函數，this.tableData---通過Ajax獲取本頁碼的列表數據
說明：handleSelectionChange（）----選擇變化時觸發的事件方法
說明：this.pagination_new.currentPage---當前頁碼
說明：this.pageSelectedArr = [ ] --- 二維數組保存el-table表格多選結果pageSelectedArr [ 當前頁碼 ] [ 當前頁碼選中的數據 ]
說明：myToggleRowSelection（）---判斷回顯選中行的方法
說明：this.url, this.param----Ajax的URL和參數
0.頁面Element標簽
<el-table ref="multipleTable" :data="tableData"
@select="handleSelectionChange" @select-all="handleSelectionChange" >
1.記錄選中行的數據
handleSelectionChange(selection, row) {
//先把本頁碼已經保存下來的選中數據清空 this.pageSelectedArr[this.pagination_new.currentPage] = []; if (null != selection && selection.length > 0) { this.pageSelectedArr[this.pagination_new.currentPage] = selection; }
}
2.通過Ajax獲取某一頁數據集，並顯示在頁面
tableLoad: function () {
this.$store
.dispatch(this.url, this.param)
.then(result => {
//從後臺獲取某一頁數據
this.tableData =result.data ；
let _this = this;
//異步事件中執行回顯
setTimeout(() => {
_this.myToggleRowSelection();
}, 500);
}).catch(result => {
this.tablePaginationLong = false;
});},
說明：使用 setTimeout(）原因是要等到 this.tableData 數據渲染完後，而且 toggleRowSelection（）需要在一個異步事件中執行。
3.接受到後臺返回的數據後遍歷本頁面表格的數據(tableData )，
遍歷二維數組裏面下標是本頁面的數據(let tempData = this.pageSelectedArr[this.pagination_new.currentPage];)，
找到它們的對應條件就能顯示選擇的狀態了；
//回顯
myToggleRowSelection() {
let toggArr = [];
let tempData = this.pageSelectedArr[this.pagination_new.currentPage];
if (null != tempData && tempData.length > 0) {
for (let i = 0, n = tempData.length; i < n; i++) {
for (let j = 0, m = this.tableData.length; j < m; j++) {
//根據某字段判斷這一行數據是否需要回顯
//並且根據把this.tableData[j],放到一個臨時數組裏面toggArr[]
//為啥不直接使用this.pageSelectedArr[this.pagination_new.currentPage]呢？
//原因：因為每一行數據是一個對象，重新從後臺獲取的this.tableData[?]的內存地址
// 和this.pageSelectedArr[this.pagination_new.currentPage][?]的內存地址是不同的
// 所以this.$refs.multipleTable.toggleRowSelection(row);不起作用。
if (tempData[i].companyName === this.tableData[j].companyName) {
toggArr.push(this.tableData[j]);
}
}
}
}
//調用el-table的行toggleRowSelection
//用於多選表格，切換某一行的選中狀態，
//如果使用了第二個參數，則是設置這一行選中與否（selected 為 true 則選中）
if (toggArr) {
toggArr.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}}
通過後臺SQL獲取分頁數據，在使用VUE-Element-Table 表格選擇多行數據時，怎樣在