在項目中,分頁是由後臺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();
}
}