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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`el-table` 是 Element UI 提供的一个用于展示表格的组件,它提供了丰富的功能,包括列宽调整、分页、排序、搜索以及数据回显等。关于复选框选中回显的问题,通常是在表格中添加了 `selection` 属性,用来管理选中的行,并希望用户操作(如点击选中/取消选中)后,状态能够保存并在页面刷新或重新加载数据后依然保持原选状态。 具体实现步骤如下: 1. 在 `el-table` 的配置中启用选择模式: ```html <el-table :data="tableData" :selection="selectedRows"> ... </el-table> ``` 这里,`:selection="selectedRows"` 是绑定一个数组,存储选中的行数据。 2. 设置 `row-key`,确保每个数据项都有唯一的标识,以便在数据发生变化可以正确地更新选中状态: ```html <el-table :data="tableData" :selection="selectedRows" :row-key="rowKey"> ... </el-table> ``` 3. 保存选中状态到数据源或Vuex、localStorage等持久化存储: ```javascript // 在获取数据或刷新页面之前,检查并设置选中行 loadData() { this.selectedRows = localStorage.getItem('selectedRows') || []; // 加载数据 } // 在数据改变后,保存选中行到持久化存储 handleSelectChange(rows) { localStorage.setItem('selectedRows', rows.map(row => row.id)); // 假设id作为唯一的标识 } ``` 4. 针对表格的数据回显,确保在数据加载将之前保存的选中状态还原到对应的行。 这样,当你再次打开页面,只要数据结构不变,用户之前的选中状态就会被正确地复现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值