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…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
给网站添加live2d看板娘
给网站添加live2d看板娘 参考文献: stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下,文章也主…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
