vue+element ui 分頁表格操作的坑
問題一:為實現分頁記憶選中項,但實際獲取資料後this.$refs.xxx.toggleRowSelection函式無效
【轉載】自“前端開發終生學習者”的《獲取資料後this.$refs.xxx.toggleRowSelection
無效》
方法:獲取資料後在外部加上一個$nextTick
即可
原因:$nextTick
是在下次 DOM 更新迴圈結束之後執行延遲迴調,在修改資料之後使用 $nextTick
,則可以在回撥中獲取更新後的 DOM
問題二:排序只在當前頁的表格資料中排序
1.不分頁的情況下排序:
方法一:通過$refs.table動態修改default-sort的值
方法二:給對應列頭新增sortable
2.分頁的情況下排序:
方法一:
1.對應列設定sortable=“custom”;
2.el-table屬性裡設定sort-change方法,如按年齡排序我們設定@sort-change=“handleAgeSortChange”;
3.在handleAgeSortChange函式中:
(1)設定boolean型別的flag標誌當前是否正在排序中,使得分頁時可以進行判斷是否正在排序,若正在排序則按排序得到的結果進行頁碼跳轉,若沒有正在排序則按照所有資料原來的順序進行頁碼跳轉;
(2)將原來的所有資料進行拷貝,使用拷貝資料來氣泡排序;
(3)將排序後的拷貝資料作為引數傳參給為表格賦值的函式。
4.這樣有點小問題:點選排序圖示時,是按照降序、升序、不排序這樣的圖示順序顯示的,我這個方法就和圖示顯示不匹配了。其實可以改進flag的值,寫成desc,asc,nosort這樣的內容迴圈取值。
問題三:toggleRowSelection函式引數
toggleRowSelection的第一個引數需要填寫table引用的data的資料,比如tableData[3]這樣的資料toggleRowSelection函式才能在表格中找到。
原因:應該是toggleRowSelection函式原理不是在表格資料中查詢相等的資料,而是找到指向表格資料存放地址的索引。
問題四:type=selection的坑
方法一:可以自己寫複選框
<el-table-column>
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked"></el-checkbox>
</template>
</el-table-column>
方法二:用flag標記當前行是否被選中
//copyChooseTchIds為data定義的存放儲存選中的行。
selectChange(val, row){
/* 1 => add ; 0 => remove*/
let flag = 0;
for(let i in val){
if(row.id === val[i].id){
flag = 1
break;
}
}
if(flag === 1){
this.copyChooseTchIds.push(row);
}
else{
for(let i in this.copyChooseTchIds){
if(this.copyChooseTchIds[i].id == row.id)
this.copyChooseTchIds.splice(i, 1);
}
}
}