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>