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>
相关推荐
宿67412 小时前
vue3-包管理器
前端·vue.js
@PHARAOH12 小时前
WHAT - Remix 入门和基本实践:理解两套产物
前端·remix
mayaairi13 小时前
Vue2 生命周期完全指南:从创建到销毁的8个钩子函数
前端·javascript·vue.js
研☆香13 小时前
一个简单的气泡弹窗制作
javascript
xy345313 小时前
axure9.0 如何打造一个计时器(简单版)
前端·ui·html·axure·原型·产品设计
大模型丫丫13 小时前
用 TypeScript、NestJS 和 LangGraph 搭建一个可控的 AI Agent
javascript·人工智能·typescript
IMPYLH14 小时前
HTML 的 <pre> 元素
前端·javascript·html
shmily麻瓜小菜鸡14 小时前
JavaScript / TypeScript 易踩坑知识点 —— 异步编程类
开发语言·javascript·typescript
tsumikistep15 小时前
【前端】Vue + Axios 跨域问题实战:7070 代理转发 8080 + 401 报错分析(黑马外卖)
前端·javascript·vue.js
lichenyang45315 小时前
鸿蒙首页从等高商品 Grid 到双列瀑布流:同一张图也能做出小红书式浏览节奏
前端