解决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>