解决elementui分页时，el-table选择框不显示问题_elmentui 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();
				}
			}
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

完整代码：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170