关于element-ui:解决elementui分页时eltable选择框不显示问题

el-table 分页时抉择框不显示问题，例如：第一页抉择了数据，点击分页到第二页，而后再返回第一页时，第一页抉择的数据失落了，想破了脑袋相处了上面的办法，求大神求教

外围办法：

// 表格单选事件
        selectRole(selection, row) {
            // 因为翻页点选后 selection 会呈现为 undefined 的元素，须要进行是否存在判断
            if (selection && selection.find(item => item && item.permissionId === row.permissionId)) {
                // 选中新增一行
                this.addRows([row]);
            } else {
                // 勾销删除一行
                this.removeRows([row]);
            }
        },
        // 表格全选事件
        selectRoleAll(selection) {
            // 如果有则是全选否则就是全勾销
            if (selection.length > 0) {this.addRows(this.tableList);
            } else {this.removeRows(this.tableList);
            }
        },
        // 增加选中行
        addRows(rows) {for (const item of rows) {
                // 如果选中的数据中没有这条就增加进去
                if (!this.selectedRow.find(i => i.id === item.id)) {this.selectedRow.push(item);
                }
            }
        },
        // 勾销选中行
        removeRows(rows) {if (this.selectedRow && this.selectedRow.length) {for (const item of rows) {this.selectedRow = this.selectedRow.filter(i => i.id !== item.id);
                }
            }
        },
        // 前端实现分页 以及翻页记忆勾选
        setPagination(no, size, data) {
            // this.tableList = data;
            this.toggleSelection(this.selectedRow);
        },
        // 选中 table 已有数据
        toggleSelection(rows) {if (rows && rows.length) {
                rows.forEach(row => {this.$nextTick(() => {const checked = this.tableList.find(tableRow => tableRow.id === row.id);
                        this.$refs.roleData.toggleRowSelection(checked);
                    });
                });
            } else {if (this.$refs.roleData !== undefined) {this.$refs.roleData.clearSelection();
                }
            }
        },

残缺代码：

<template>
    <div>
        <div class="">
            <el-table
                border
                highlight-current-row
                :height="500"
                resizable
                :data="tableList"
                ref="roleData"
                :row-style="selectedHighlight"
                @select="selectRole"
                @select-all="selectRoleAll"
            >
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column label="序号" type="index" width="60"></el-table-column>
                <el-table-column
                    v-for="(item, index) in tableLabelStaff"
                    :key="index"
                    :prop="item.prop"
                    :width="item.width"
                    :label="item.label"
                    :show-overflow-tooltip="item.showOverTooltip"
                >
                    <template slot-scope="scope">
                        <span>{{scope.row[scope.column.property] }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="rolepageIndex"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="rolepageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="rolepageCount"
        ></el-pagination>
    </div>
</template>

<script>
export default {data() {
        return {
            // 分页
            rolepageIndex: 1,
            rolepageSize: 5,
            rolepageCount: 0,
            // 记忆分页的时 table 选中状态
            tableList: [],
            // 记忆曾经选中的
            selectedRow: [],
            // 表头的数据
            tableLabelStaff: [{ label: '日期', width: '133', prop: 'date', showOverTooltip: true, sortable: false},
                {label: '姓名', width: '90', prop: 'name', showOverTooltip: true, sortable: false},
                {label: '地址', width: '90', prop: 'address', showOverTooltip: true, sortable: false}
            ]
        };
    },
    computed: {
        // 相当于后端接口返回的数据
        tableData() {let list = [];
            for (let i = 0; i < 100; i++) {list[i] = {};
                list[i]['date'] = '2016-05-02' + i;
                list[i]['name'] = '王小虎' + i;
                list[i]['address'] = ` 上海市普陀区金沙江路 ${i} 号 `;
                list[i]['id'] = i;
            }
            return list;
        }
    },
    mounted() {
        // 获取第一页的接口
        this.currentChangePage(this.tableData, this.rolepageIndex);
        this.roleData = this.tableData;
        this.rolepageCount = this.tableData.length;
        this.setPagination(this.rolepageIndex, this.rolepageSize, this.roleData);
    },
    methods: {handleSizeChange: function(pageSize) {
            // 每页条数切换
            this.rolepageSize = pageSize;
            this.handleCurrentChange(this.rolepageIndex);
        },
        handleCurrentChange: function(currentPage) {
            // 页码切换
            this.rolepageIndex = currentPage;
            this.currentChangePage(this.tableData, currentPage);
        },
        // 分页办法（重点）currentChangePage(list, currentPage) {let from = (currentPage - 1) * this.rolepageSize;
            let to = currentPage * this.rolepageSize;
            this.tableList = [];
            for (; from < to; from++) {if (list[from]) {this.tableList.push(list[from]);
                }
            }

            this.setPagination(this.rolepageIndex, this.rolepageSize, this.roleData);
        },
        // 表格单选事件
        selectRole(selection, row) {
            // 因为翻页点选后 selection 会呈现为 undefined 的元素，须要进行是否存在判断
            if (selection && selection.find(item => item && item.permissionId === row.permissionId)) {
                // 选中新增一行
                this.addRows([row]);
            } else {
                // 勾销删除一行
                this.removeRows([row]);
            }
        },
        // 表格全选事件
        selectRoleAll(selection) {
            // 如果有则是全选否则就是全勾销
            if (selection.length > 0) {this.addRows(this.tableList);
            } else {this.removeRows(this.tableList);
            }
        },
        // 增加选中行
        addRows(rows) {for (const item of rows) {
                // 如果选中的数据中没有这条就增加进去
                if (!this.selectedRow.find(i => i.id === item.id)) {this.selectedRow.push(item);
                }
            }
        },
        // 勾销选中行
        removeRows(rows) {if (this.selectedRow && this.selectedRow.length) {for (const item of rows) {this.selectedRow = this.selectedRow.filter(i => i.id !== item.id);
                }
            }
        },
        // 前端实现分页 以及翻页记忆勾选
        setPagination(no, size, data) {
            // this.tableList = data;
            this.toggleSelection(this.selectedRow);
        },
        // 选中 table 已有数据
        toggleSelection(rows) {if (rows && rows.length) {
                rows.forEach(row => {this.$nextTick(() => {const checked = this.tableList.find(tableRow => tableRow.id === row.id);
                        this.$refs.roleData.toggleRowSelection(checked);
                    });
                });
            } else {if (this.$refs.roleData !== undefined) {this.$refs.roleData.clearSelection();
                }
            }
        },
    }
};
</script>

<style lang="scss"></style>