element跨分页操作选择详解

本文实例为大家分享了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>

来源：https://blog.csdn.net/xy19950125/article/details/104772388