1. 程式人生 > >vue+element ui 分頁表格操作的坑

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);
        }
    }
}