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>
相关推荐
c2385610 分钟前
HTTP 超文本传输协议全解:Web 世界的通信规则
前端·网络协议·http
gis开发之家10 分钟前
vue3组合式函数(Composables)的艺术——将业务逻辑从UI组件中连根拔起
前端·javascript·vue.js·前端框架·vue3·前端工程化·前端架构
uuai20 分钟前
vue导出pdf
前端·vue.js·pdf
小爷毛毛_卓寿杰38 分钟前
我和 TRAE AI聊了聊,它帮我为五迷老师们做了个城市漫游小程序!
前端·人工智能·后端
liuniansilence39 分钟前
一次讲透 H5 唤起原生 App:Scheme 协议、平台限制与生产级封装
前端·javascript
heiyehk39 分钟前
我用AI不断迭代到7W行代码的项目-像素画编辑器
前端·架构·设计
用户9385156350740 分钟前
从“问答机器”到“智能体”:AI Agent 是如何自主工作的?
javascript·人工智能·全栈
weedsfly42 分钟前
前端懒加载全家桶:图片、路由、组件的按需加载
前端·javascript·面试
千帆_Evan43 分钟前
🤖 AI 写代码总在重复造轮子?我们把 Utils 复用门禁做进了 Agent 运行时(已开源)
前端·agent
Kel43 分钟前
多 Tab 聊天不翻车:纯前端实现跨标签页消息同步的三层协同架构
前端·javascript·人工智能