解决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();
				}
			}
		},

完整代码:







你可能感兴趣的:(elementui,前端,vue.js)