element plus e-table表格中使用多选,当翻页时已选中的数据丢失

news/2024/10/21 15:41:05/

在这里插入图片描述摘要:

点击第一页选中两个,再选择第二页,选中,回到第一页,之前选中的要保留!

在这里插入图片描述
element ui table

解决办法: :row-key=“getRowKeys” (写在el-table中)

methods中声明 getRowKeys()方法 
getRowKeys(row) {return row.id
},

:reserve-selection=“true” (写在el-table-column中type为select的行中)

<el-table-column type="selection" :reserve-selection="true" width="44px" />

因为表格分页,点击会刷新第一页的数据的,只会加载第二页的数据,前面页面的数据是拿不到的,上面的还是不行的话加入@selection-change,当选择项发生变化时会触发该事件回调selection!

终极方法:
使用toggleRowSelection方法把数据硬塞进去

this.$nextTick(() => {// this.multipleSelection:第一页和第二页选中的数据数组, this.tableList是表格数据if (this.multipleSelection.length) {// this.$refs.elTable 当前表格refthis.$refs.elTable.clearSelection()this.multipleSelection.forEach(row => {const selectedRow = this.tableList.find(item => item.id === row.id)if(selectedRow){// 当前页(第一页)需要被选中的数据使其选中this.$refs.elTable.toggleRowSelection(selectedRow, true);}else{// 不在当前页(第二页)的数据,也硬塞到@selection-change的参数中,这时当你在第一页选中其他数据时,selection-change的参数也会带着第二页的数据this.$refs.elTable.toggleRowSelection(row, true);}})}
})

或者获取所有数据回来就更加好处理了!记录选中的,但是最傻了!

mounted(){init()
},
async init(){await setCheck()await getTableList()
},
// 这里是请求接口获取表格分页数据
getTableList(){// this.tableList = 
},
// 这里获取所有的数据
getAllTableList(){// 请求获取所有的数据,然后return出去// return allList
},
// 设置选中
async setCheck() {const allTableList = await getAllTableList()allTableList.forEach((item) => {if(ids.has(item.id)){this.$refs.elTable.toggleRowSelection(item, true)}})
}

http://www.ppmy.cn/news/1540827.html

相关文章

99. UE5 GAS RPG 被动技能实现

在这一篇&#xff0c;我们在之前打下的基础下&#xff0c;实现一下被动技能。 被动技能需要我们在技能栏上面选择升级解锁技能后&#xff0c;将其设置到技能栏&#xff0c;我们先增加被动技能使用的标签。 FGameplayTag Abilities_Passive_HaloOfProtection; //被动技能-守护光…

【微信小程序_17_生命周期】

摘要:本文介绍了小程序的生命周期,包括生命周期的定义、分类、生命周期函数等内容。生命周期分为应用生命周期和页面生命周期,生命周期函数由小程序框架提供,会按次序自动执行,开发人员可利用这些函数在特定时间点执行操作,如在页面加载时初始化数据。 微信小程序_17_生命…

【进阶OpenCV】 (21) --卷积神经网络实现人脸检测

文章目录 卷积神经网络实现人脸检测一、加载CNN人脸检测模型二、图像预处理三、绘制人脸矩形框 总结 卷积神经网络实现人脸检测 opencv可以直接通过readnet来读取神经网络。dlib也可以的。 任务&#xff1a;使用dlib库中的卷积神经网络&#xff08;CNN&#xff09;人脸检测模…

OpenGL、OpenCL 和 OpenAL 定义及用途

OpenGL 全称&#xff1a;Open Graphics Library&#xff0c;即开放图形库。是一种跨编程语言、跨平台的编程接口规格&#xff0c;用于二维和三维图形的绘制。它是一个功能强大、调用方便的底层图形库&#xff0c;提供了丰富的绘图函数&#xff0c;包括基本图形绘制、变换、光照…

【Lean 4 学习】用Lean 4证明自然数的平方差公式

引言 最近开始学习Lean 4来做数学证明&#xff0c;虽然挺有挑战&#xff0c;但是对于我这个30多岁的大叔来说有种刚学编程时候探索的乐趣hhh自然数平方差公式这个问题&#xff0c;是我刚学了平方和公式&#xff0c;想变变给自己练手用的&#xff0c;结果卡了我好久&#xff0c…

入侵及防护:7个迹象说明你的手机可能被入侵!

在现代社会中&#xff0c;手机已成为我们生活中不可或缺的一部分。然而&#xff0c;随着智能手机的普及&#xff0c;手机安全问题也日益严重。手机被入侵的风险不仅影响个人隐私&#xff0c;还可能导致财产损失。本文将为你介绍7个迹象&#xff0c;帮助你判断手机是否可能被入侵…

electron-vite_10electron-updater软件更新

网很多electron-updater更新文章&#xff0c;这里只简单写一下演示代码&#xff1b; 为什么选择 electron-updater插件可以自动更新应用程序,同时支持多个平台;比官方要强; 官方的autoUpdater仅支持macOS 和 Windows 自动更新; 注意是自动&#xff0c;直接更新那种; 脚手架中是…

LoadBalancer 类型的 Service工作期间,kube-proxy做了什么?

kube-proxy 是 Kubernetes 集群中一个重要的组件&#xff0c;负责实现服务的网络代理和负载均衡功能。当创建一个 LoadBalancer 类型的 Service 时&#xff0c;kube-proxy 在整个过程中扮演了关键角色。以下是 kube-proxy 在 LoadBalancer 类型 Service 创建和使用过程中所做的…