解决elementui分页时，el-table选择框不显示问题

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>