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>