el-table保留勾选的数据(分页、刷新数据)

1.在el-table中添加行标识 :row-key="val => val.id",这里最好选择能唯一标识每一行的数据作为key的返回值,否则回选失败

html 复制代码
<el-table :row-key="val => val.id" :data="tableList" border style="width: 100%" @selection-change="handleSelectionChange">

2.在复选框那列加上这个属性:reserve-selection="true"

html 复制代码
<el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>

完整代码:

html 复制代码
#html:
<el-table :row-key="val => val.id" @selection-change="handleSelectionChange" :data="tableList">
	<el-table-column type="selection" :reserve-selection="true" width="55" />
</el-table>
#js:
<script>
export default {
	data() {
		return {
			selExpertList:[],
		};
	},
	methods: {
		handleSelectionChange(selection) {
		this.selExpertList = JSON.parse(JSON.stringify(selection));
		},
	},
};
</script>
相关推荐
web打印社区4 分钟前
Vue3 发票静默打印,我这边能跑通的一版
前端·javascript·vue.js·chrome·electron
嘟哩DuliDuli17 分钟前
创作 Agent 的任务状态该如何保存
android·java·javascript
lemon_sjdk1 小时前
JavaScript 常用关键字全解析
开发语言·javascript·ecmascript
妖孽白小白1 小时前
el-select的内容续写实现
前端·vue.js·elementui
不可能片场1 小时前
Electron 主进程热补丁:单行 JS 安全打法
前端·electron
梨想橙汁1 小时前
Pinia 状态管理实战:定义 Store、修改数据、模块拆分
前端·vue.js
高申航1 小时前
Vue 3 + DYMO Connect Framework 实战:从标签模板到打印服务的完整实现
前端·javascript·vue.js
梨想橙汁2 小时前
Vue3 组件开发:生命周期钩子,组件之间通信全方案
前端·vue.js
雪芽蓝域zzs2 小时前
分页组件 + el-config-provider 中文国际化 + 靠右布局
前端·javascript·vue.js
恋猫de小郭2 小时前
iPhone Duo 适配详解,需要改变的不止是布局模型
前端·flutter·ios