element跨分頁操作選擇詳解
阿新 • • 發佈:2020-06-30
本文例項為大家分享了element跨分頁操作選擇的具體程式碼,供大家參考,具體內容如下
業務需求:在批量匯出或者批量刪除的時候會涉及到跨分頁匯出或者批量刪除,這是你會發現,當你選擇後點擊分頁,發現之前選擇的資料已經沒有了,現在就是要滿足分頁點選分頁後原始資料保留
<template> <div> <el-table :data="tableData" tooltip-effect="dark" style="width: 100%;" header-align="left" border ref="table" row-key="serviceDateId" @selection-change="handleSelectionChange" @row-dblclick="toDetail" @sort-change="sortChange" > <el-table-column type="selection" el-table-column width="50" fixed="left"></el-table-column> <el-table-column label="序號" width="80" fixed="left"> <template slot-scope="{row,$index}"> <span>{{$index + 1}}</span> </template> </el-table-column> <el-table-column label="服務日期" prop="serviceDate" sortable="custom" min-width="120" ></el-table-column> <el-table-column label="服務物件" prop="vsoName" min-width="120"></el-table-column> <el-table-column label="身份證號" prop="idCard" sortable="custom" min-width="200"></el-table-column> <el-table-column label="服務內容" prop="serviceContentName" min-width="200"></el-table-column> <el-table-column label="服務結果" prop="serviceResultName" min-width="100"></el-table-column> <el-table-column label="志願者" prop="volunteerName" sortable="custom" min-width="120" show-overflow-tooltip></el-table-column> <el-table-column label="志願者所屬組織" prop="objName" min-width="200" show-overflow-tooltip></el-table-column> <el-table-column fixed="right" label="操作" width="150" header-align="center"> <template slot-scope="{row,$index}"> <span @click="handleEdit(row)" class="table-btn" v-has="{class: '編輯'}">編輯</span> <span @click="handleRemove($index,row)" class="table-btn" v-has="{class: '刪除'}">刪除</span> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize" @pagination="getData(form)" /> </div> </template> <script> export default { data(){ return{ ruleForm: { username: '',password:'' },form: { pageNum: 1,// 分頁頁數 pageSize: 10,// 分頁數量 },multipleSelection: [],//多選的行資料 multipleSelectionAll:[],// 當前頁選中的資料 idKey: 'idCard',} },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) { 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; } } } }) },// 多選的行資料 handleSelectionChange(val) { this.multipleSelection = val setTimeout(()=>{ this.changePageCoreRecordData(); },50) },// 獲取表格資料 getData(form) { let parmas = _.cloneDeep(form); parmas.liveArea = typeof(parmas.liveArea) === 'object'?parmas.liveArea.join(''):parmas.liveArea; recordSearch(form).then(res => { if (res.rows) { this.tableData = res.rows; this.total = res.total; this.exportData = _.cloneDeep(form); setTimeout(()=>{ this.setSelectRow(); },50) } else { this.tableData = []; this.total = 0; } }) } },mounted(){ this.getData(this.form) } } </script> <style lang="sass" scoped> </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。