Element ui 中使用table組件實現分頁記憶選中

我們再用vue和element-ui，或者其他的表格的時候，可能需要能記憶翻頁勾選，那么實現以下幾個方法就ok了

示例如下 

<el-table :data="tableData" ref="table" @selection-change="handleSelectionChange">
     <el-table-column type="selection"></el-table-column>
     <el-table-column prop="personName" label="客戶名稱"></el-table-column>
     <el-table-column prop="telphone" label="手機號"></el-table-column>
     <el-table-column prop="idNo" label="身份證號"></el-table-column>
     <el-table-column prop="linkTypes" label="客戶身份"></el-table-column>
</el-table>
<el-pagination :page-size="pagination.pageSize" @current-change="currentChange"
                         :current-page="pagination.pageNumber"
                         :page-sizes="pagination.pageSizes"
                         :total="pagination.totalRows"
                         @size-change='sizeChange'>
</el-pagination>

首先定義個data值

data () {
   return {
      multipleSelectionAll: [],   // 所有選中的數據包含跨頁數據
 multipleSelection: [], // 當前頁選中的數據
　　 idKey: 'personId', // 標識列表數據中每一行的唯一鍵的名稱(需要按自己的數據改一下)
      tableData: [] // 表格數據
　　　 // 此處省略pagination的定義
 }  

}

方法中定義以下：

methods : {
           // 設置選中的方法
           setSelectRow() {
                if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
                    return;
                }
                // 標識當前行的唯一鍵的名稱
                let idKey = this.idKey;
                let selectAllIds = [];
                let that = this;
                this.multipleSelectionAll.forEach(row=>{
                    selectAllIds.push(row[idKey]);
                })
                this.$refs.table.clearSelection();
                for(var i = 0; i < this.tableData.length; i++) {                    
                    if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
                        // 設置選中，記住table組件需要使用ref="table" this.$refs.table.toggleRowSelection(this.tableData[i], true);
                    }
                }
            } ,
            // 記憶選擇核心方法
            changePageCoreRecordData () {
                // 標識當前行的唯一鍵的名稱
                let idKey = this.idKey;
                let that = this;
                // 如果總記憶中還沒有選擇的數據，那么就直接取當前頁選中的數據，不需要后面一系列計算
                if (this.multipleSelectionAll.length <= 0) {
                    this.multipleSelectionAll = this.multipleSelection;
                    return;
                }
                // 總選擇里面的key集合
                let selectAllIds = [];
                this.multipleSelectionAll.forEach(row=>{
                    selectAllIds.push(row[idKey]);
                })
                let selectIds = []
                // 獲取當前頁選中的id
                this.multipleSelection.forEach(row=>{
                    selectIds.push(row[idKey]);
                    // 如果總選擇里面不包含當前頁選中的數據，那么就加入到總選擇集合里
                    if (selectAllIds.indexOf(row[idKey]) < 0) {
                        that.multipleSelectionAll.push(row);
                    }
                })
                let noSelectIds = [];
                // 得到當前頁沒有選中的id
                this.tableData.forEach(row=>{
                    if (selectIds.indexOf(row[idKey]) < 0) {
                        noSelectIds.push(row[idKey]);
                    }
                })
                noSelectIds.forEach(id=>{
                    if (selectAllIds.indexOf(id) >= 0) {
                        for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
                            if (that.multipleSelectionAll[i][idKey] == id) {
                                // 如果總選擇中有未被選中的，那么就刪除這條
                                that.multipleSelectionAll.splice(i, 1);
                                break;
                            }
                        }
                    }
                })
            },
            currentChange(val){
                // 改變頁的時候調用一次
                this.changePageCoreRecordData();
　　　　　　　　　this.pagination.pageNumber = val;
　　　　　　　　　this.query();

 　　　　　　}, sizeChange(val){ // 改變每頁顯示條數的時候調用一次 
　　　　　　　　　this.changePageCoreRecordData();
　　　　　　　　　this.pagination.pageSize = val;
　　　　　　　　　this.query();
 }, 

 handleSelectionChange (val) {
 // table組件選中事件,記得加上@selection-change="handleSelectionChange"
 this.multipleSelection = val;
 }, query () { // 分頁查詢數據方法，在成功返回數據方法里調用setSelectRow方法，使每次分頁查詢都能勾選中
 $.ajax({..., success:(res)=>{
 ...... setTimeout(()=>{ this.setSelectRow(); }, 200) } }) }, 
　　　　　　　// 得到選中的所有數據
 getAllSelectionData () {

　　　　　　　　　  // 再執行一次記憶勾選數據匹配，目的是為了在當前頁操作勾選后直接獲取選中數據

　　　　　　　　　　 this.changePageCoreRecordData();

　　　　　　　　　console.log(this.multipleSelectionAll)
 }

}

如果你的是自定義組件dialog彈窗里面的表格選擇，如果想每次打開想選中，那么就直接在props加一個值，然后加一個watch

props: [ "selectData"],
watch: {
    'selectData' (val) {
        this.multipleSelectionAll = val;
        }
    },

 上傳到了GitHub上一個示例，可供參考

        https://github.com/wanglu05/element-ui-memory-page/