element ui 分頁記憶checked
阿新 • • 發佈:2020-09-15
<el-table :data="tableData" border ref="multipleTableChannel" @selection-change="selectChannel" style="width: 100%"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column type="index" width="50" align="center" label="序號"/> <el-table-column prop="date" align="center" label="商戶名稱"> </el-table-column> <el-table-column prop="name" align="center" label="聯絡人"> </el-table-column> <el-table-column prop="address" align="center" label="聯絡電話"> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" layout="total,prev, pager, next" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
multipleSelectionAll: [], // 所有選中的資料包含跨頁資料 multipleSelection: [], // 當前頁選中的資料 idKey: 'id', // 標識列表資料中每一行的唯一鍵的名稱(需要按自己的資料改一下)
// 設定選中的方法 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" console.log(this.tableData[i]) 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; } } } }) console.log(that.multipleSelectionAll) }, handleCurrentChange(val){ // 改變頁的時候呼叫一次 this.page.currentPage = val; this.changePageCoreRecordData(); this.query(); }, handleSelectionChange1 (val) { // table元件選中事件,記得加上@selection-change="handleSelectionChange" this.multipleSelection = val; }, query () { // 分頁查詢資料方法,在成功返回資料方法裡呼叫setSelectRow方法,使每次分頁查詢都能勾選中 if(this.page.currentPage==1){ this.tableData=this.tableDatsa }else{ this.tableData=this.datass } setTimeout(()=>{ this.setSelectRow(); }, 200) },