el-table一键选择全部行,切换分页后无法勾选
el-table一键全选,分页的完美支持
- 问题背景
- 尝试解决
- 存在问题
- 问题分析
- 解决方案
- 改进思路如下
- 具体代码实现如下
问题背景
现在有个需求,一个表格有若干条数据(假设数量大于20,每页10条,保证有2个以上分页即可)。
现在需要在表格上方加个全部选择的按钮,点击全部选择按钮时,可以把表格的复选框全部勾选,切换分页后依然是勾选状态,那么怎么实现呢?示意图如下:
尝试解决
我们平时做表格的勾选时,一般都用selection-change方法。
假设我们有个接口getAllTableIds返回数据的全部id,那么我们尝试以下方法来实现上述需求:
<el-button type="primary" plain size="mini" @click="handleSelectAll">全部选中</el-button>
<el-tableref="tableRef":data="tableData"@selection-change="handleSelectionChange":row-key="row => row.id"
><el-table-column type="selection" reserve-selection label="序号" /><el-table-column label="编号" prop="code" />
</el-table>
export default {methods: {/** 多选框选中操作 */handleSelectionChange(selection) {this.ids = selection.map((item) => item.id);},// 全部选中handleSelectAll() {getAllTableIds().then(res => {this.ids = res.datathis.setSelectedCheckbox()})},// 设置按勾选框选中setSelectedCheckbox() {this.$nextTick(() => {if (this.ids.length > 0) {this.tableData.forEach((item) => {if ( this.ids.includes(item.id) ) {this.$refs.tableRef.toggleRowSelection(item, true);}});}})},}
}
存在问题
你这样写了之后,感觉还不错,点击全部选中按钮,也确实全都勾选了,就像上图一样,但是当你切换到第二页时,你就傻眼了,咋没勾选上呢?
问题分析
上面我们的思路主要分为以下几个步骤:
- 点击按钮,从接口处获取全部id列表,并保存到ids数组变量
- 遍历当前页的数据,如果ids中存在该id,那么就把当前行设置为勾选状态
- 切换分页时也调用
setSelectedCheckbox方法 - 傻眼了
其实,逻辑都没有错,错的是没用对方法,就是上面提到的selection-change方法,如果你对该方法的函数handleSelectionChange打印一下,你会发现该方法执行了10次(因为每页10条数据)
因为你在循环中执行勾选:
就不断地触发this.$refs.tableRef.toggleRowSelection(item, true);handleSelectionChange方法,这也导致上面给ids赋值全部id的集合,也会变为当前页的集合,也就导致当你切换分页时,第二页不会勾选的原因。

解决方案
el-table文档中还有这两种方法

既然循环勾选的时候会触发selection-change的方法,那么我们不用这个方法不就好了吗。
监听表格变化,可以用select和select-all两种方法的结合;因为勾选状态无非就是勾选单行和勾选当前页两种嘛!
改进思路如下
- 点击按钮,从接口处获取全部id列表,并保存到ids数组变量
- 遍历当前页的数据,如果ids中存在该id,那么就把当前行设置为勾选状态
- 切换分页时也调用
setSelectedCheckbox方法 - 单行勾选变化
- 选中:把该行id值push进
ids数组,并去重(防止以外情况) - 取消勾选:把该行id值从
ids数组中去除
- 选中:把该行id值push进
- 当前页勾选变化
- 选中:把当前页的id值push进
ids数组,并去重(防止以外情况) - 取消勾选:把当前页的id值从
ids数组中去除
- 选中:把当前页的id值push进
这样就不会影响ids的值了!
具体代码实现如下
<el-button type="primary" plain size="mini" @click="handleSelectAll">全部选中</el-button>
<el-tableref="tableRef":data="tableData"@select="handleSelectRow"@select-all="handleSelectAllRow":row-key="row => row.id"
><el-table-column type="selection" reserve-selection label="序号" /><el-table-column label="编号" prop="code" />
</el-table>
export default {methods: {/** 多选框选中操作 */handleSelectionChange(selection) {this.ids = selection.map((item) => item.id);},// 选择某行handleSelectRow(selection, row) {const id = row.idif(this.ids.includes(id)) {this.ids = this.ids.filter(item => item !== id)} else {this.ids.push(id)}},// 选择当前页handleSelectAllRow(selection) {// 如果全部勾选if(selection.length > 0) {const ids = selection.map((item) => item.id);this.ids = Array.from(new Set([...this.ids,...ids]))} else {// 如果当前页取消勾选const ids = this.tableData.map((item) => item.id);this.ids = this.ids.filter(item => !ids.includes(item))}},// 设置按勾选框选中setSelectedCheckbox() {this.$nextTick(() => {if (this.ids.length > 0) {this.tableData.forEach((item) => {if ( this.ids.includes(item.id) ) {this.$refs.tableRef.toggleRowSelection(item, true);}});}})},}
}
这样就能解决一键全选、且分页保留勾选状态的功能了!
别忘了,请求列表接口时也调用
setSelectedCheckbox方法
如果有更好的解决办法,可在评论区讨论,谢谢。
相关文章:
el-table一键选择全部行,切换分页后无法勾选
el-table一键全选,分页的完美支持 问题背景尝试解决存在问题问题分析 解决方案改进思路如下具体代码实现如下 问题背景 现在有个需求,一个表格有若干条数据(假设数量大于20,每页10条,保证有2个以上分页即可)。 现在需要在表格上方…...
负载均衡最佳实践及自定义负载均衡器
文章目录 负载均衡最佳实践及自定义负载均衡器一、负载均衡概述二、轮询负载均衡器(一)理论介绍(二)Java 实现示例(三)关键步骤(四)流程图 三、随机负载均衡器(一&#x…...
大模型 LMDeploy 量化部署
1 模型部署 定义: 在软件工程中,部署通常指的是将开发完毕的软件投入使用的过程。在人工智能领域,模型部署是实现深度学习算法落地应用的关键步骤。简单来说,模型部署就是将训练好的深度学习模型在特定环境中运行的过程。 场景…...
算法设计5_分支限界法
分支限界法 分支限界法常以广度优先或以最小耗费(最大效益)优先的方式搜索问题的解空间树,裁剪那些不能得到最优解的子树以提高搜索效率。 步骤: ① 定义解空间(对解编码); ② 确定解空间的树结构; ③ 按BFS等方式搜索: a.每个活…...
2025年人工智能专业可以考哪些证书呢?
人工智能是目前全球热门的专业领域之一,随着人工智能应用范围的不断扩大,越来越多的人开始关注人工智能相关证书的获取。那么,人工智能专业可以考什么证书呢?本文将为大家介绍人工智能相关证书的种类。 人工智能机器视觉应用工程师…...
仿真技术助力高尔夫球打破传统设计局限,实现球杆强大的功能
Altair近日宣布与业内领先的高尔夫装备制造商 Cleveland Golf 开展合作,以设计新款 HiBore XL 球杆。借助 Altair 先进的仿真与设计技术,Cleveland Golf 不断刷新高尔夫装备的行业标准,并在球杆产品设计方面实现突破。 Cleveland Golf 借助 A…...
微前端架构学习笔记
前言 之前遇到过一个需求,有两个项目分别由两个不同的部门负责,不同技术栈,不同代码仓库: A 项目是官网,负责展示产品亮点等信息,有多个入口可以进入 B 项目中的不同页面。B 项目是业务线,负责…...
DApp开发:从合约到系统快速上线解决方案
在区块链技术迅猛发展的今天,去中心化应用(DApp)作为区块链的一项重要应用,已经吸引了众多开发者和企业的关注。与传统应用程序不同,DApp依托于区块链的去中心化特点,实现了透明、安全、不可篡改等优势&…...
react 中 useState 中的 set 方法异步解决
使用 useEffect 监听状态的改变。 一、异步特性 在批量处理状态更新时,用以提高性能。 二、异步解决 使用useEffect来处理更新后的状态,useEffect钩子在组件渲染后执行,并且会在依赖项(第二个参数)发生变化时重新执…...
UAC2.0 speaker——带反馈端点的 USB speaker(16bit 单声道)
UAC2.0 speaker 系列文章 UAC2.0 speaker——单声道 USB speaker(16bit) UAC2.0 speaker——类特殊请求 UAC2.0 speaker——音量控制 UAC2.0 speaker——多采样率支持 UAC2.0 speaker——24/32bit 支持 UAC2.0 speaker——speaker 数据传输 UAC2.0 speaker——同时支持 16bi…...
docker的简单使用
文章目录 docker简介docker架构镜像和容器镜像有关的常用命令容器相关常用命令 docker简介 Docker是一个开源的应用容器引擎,基于Go语言并遵从Apache2.0协议开源。 Docker可以让开方子打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到…...
Selenium:强大的 Web 自动化测试工具
Selenium:强大的 Web 自动化测试工具 在当今的软件开发和测试领域,自动化工具的重要性日益凸显。Selenium 就是一款备受欢迎的 Web 自动化测试工具,它为开发者和测试人员提供了强大的功能和便利。本文将详细介绍 Selenium 是什么,…...
设计模式 在PLM系统的应用场景介绍
通义灵码 设计模式在 PLM(产品生命周期管理)系统中扮演着重要的角色,可以帮助开发人员更好地组织代码、提高系统的可维护性和扩展性。以下是一些常见的设计模式及其在 PLM 系统中的应用场景: 1. 单例模式(Singleton …...
C#请求https提示未能为 SSL/TLS 安全通道建立信任关系
System.Net.WebException: 基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系 ,这个错误通常表明你的应用程序在尝试建立一个安全的 SSL/TLS 连接时遇到了问题。这通常是由于证书验证失败引起的。证书验证失败可能有几个原因: 证书不受信任&#…...
【人工智能】GaussDB数据库技术及应用
文章目录 前言一、数据库的基本概念及发展演进1、数据库概念DB2、数据库管理系统概念DBMS3、数据库与数据库管理系统的关系4、数据库的演进及发展5、数据模型的基本概念6、数据模型的要求和类型7、层次模型的基本概念8、网状模型的基本概念8、关系模型的基本概念9、非关系模型的…...
OpenAI12天 –第3天的实时更新,包括 ChatGPT、Sora、o1 等
OpenAI提前开启了假期,推出了为期 12 天的活动,名为“OpenAI 12 天”。在接下来的一周左右的每一天,OpenAI 都将发布现有产品的新更新以及新软件,包括备受期待的 Sora AI 视频生成器。 OpenAI 首席执行官 Sam Altman 表示&#x…...
删除Yocto中build-x9hp_ms_a12_vemmc_ap2/tmp/work/aarch64-sdrv-linux/package后再编译出错问题
前言: 在yocto编译中,一般会添加自己的package并编译打包到yocto里去。这个包里的内容有时候需要添加或者删除。但是我删除了文件,在编译完成烧录到板子上,里面还有自己删除的文件,于是就在yocto搜索哪个目录有该文件&…...
2024三掌柜赠书活动第三十五期:Redis 应用实例
目录 前言 Redis操作都会,却不知道怎么用? 关于《Redis 应用实例》 编辑推荐 内容简介 作者简介 图书目录 《Redis 应用实例》全书速览 拓展:Redis使用场景 实例1:缓存应用 场景描述 实现方法 具体代码示例 实例2&a…...
观察者模式的理解和实践
引言 在软件开发中,设计模式是开发者们为了解决常见的设计问题而总结出来的一系列最佳实践。观察者模式(Observer Pattern)是其中一种非常经典且使用率极高的设计模式。它主要用于定义对象之间的一对多关系,使得当一个对象的状态发…...
查看Windows系统上的Redis服务器是否设置了密码
查看 Redis 配置文件 1.找到 Redis 配置文件: 通常Redis配置文件名为 redis.windows.conf 或 redis.conf,它位于Redis安装目录中。 2.打开配置文件: 使用文本编辑器(如Notepad、VS Code等)打开该文件。 3.查找 re…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
提升移动端网页调试效率:WebDebugX 与常见工具组合实践
在日常移动端开发中,网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时,开发者迫切需要一套高效、可靠且跨平台的调试方案。过去,我们或多或少使用过 Chrome DevTools、Remote Debug…...
MySQL的pymysql操作
本章是MySQL的最后一章,MySQL到此完结,下一站Hadoop!!! 这章很简单,完整代码在最后,详细讲解之前python课程里面也有,感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
React父子组件通信:Props怎么用?如何从父组件向子组件传递数据?
系列回顾: 在上一篇《React核心概念:State是什么?》中,我们学习了如何使用useState让一个组件拥有自己的内部数据(State),并通过一个计数器案例,实现了组件的自我更新。这很棒&#…...
C#最佳实践:为何优先使用as或is而非强制转换
C#最佳实践:为何优先使用as或is而非强制转换 在 C# 的编程世界里,类型转换是我们经常会遇到的操作。就像在现实生活中,我们可能需要把不同形状的物品重新整理归类一样,在代码里,我们也常常需要将一个数据类型转换为另…...
开源 vGPU 方案:HAMi,实现细粒度 GPU 切分
本文主要分享一个开源的 GPU 虚拟化方案:HAMi,包括如何安装、配置以及使用。 相比于上一篇分享的 TimeSlicing 方案,HAMi 除了 GPU 共享之外还可以实现 GPU core、memory 得限制,保证共享同一 GPU 的各个 Pod 都能拿到足够的资源。…...
C#学习12——预处理
一、预处理指令: 解释:是在编译前由预处理器执行的命令,用于控制编译过程。这些命令以 # 开头,每行只能有一个预处理指令,且不能包含在方法或类中。 个人理解:就是游戏里面的备战阶段(不同对局…...
