当前位置: 首页 > news >正文

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的方法,那么我们不用这个方法不就好了吗。
监听表格变化,可以用selectselect-all两种方法的结合;因为勾选状态无非就是勾选单行勾选当前页两种嘛!

改进思路如下

  • 点击按钮,从接口处获取全部id列表,并保存到ids数组变量
  • 遍历当前页的数据,如果ids中存在该id,那么就把当前行设置为勾选状态
  • 切换分页时也调用setSelectedCheckbox方法
  • 单行勾选变化
    • 选中:把该行id值push进ids数组,并去重(防止以外情况)
    • 取消勾选:把该行id值从ids数组中去除
  • 当前页勾选变化
    • 选中:把当前页的id值push进ids数组,并去重(防止以外情况)
    • 取消勾选:把当前页的id值从ids数组中去除

这样就不会影响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一键全选&#xff0c;分页的完美支持 问题背景尝试解决存在问题问题分析 解决方案改进思路如下具体代码实现如下 问题背景 现在有个需求&#xff0c;一个表格有若干条数据(假设数量大于20&#xff0c;每页10条&#xff0c;保证有2个以上分页即可)。 现在需要在表格上方…...

负载均衡最佳实践及自定义负载均衡器

文章目录 负载均衡最佳实践及自定义负载均衡器一、负载均衡概述二、轮询负载均衡器&#xff08;一&#xff09;理论介绍&#xff08;二&#xff09;Java 实现示例&#xff08;三&#xff09;关键步骤&#xff08;四&#xff09;流程图 三、随机负载均衡器&#xff08;一&#x…...

大模型 LMDeploy 量化部署

1 模型部署 定义&#xff1a; 在软件工程中&#xff0c;部署通常指的是将开发完毕的软件投入使用的过程。在人工智能领域&#xff0c;模型部署是实现深度学习算法落地应用的关键步骤。简单来说&#xff0c;模型部署就是将训练好的深度学习模型在特定环境中运行的过程。 场景…...

算法设计5_分支限界法

分支限界法 分支限界法常以广度优先或以最小耗费(最大效益)优先的方式搜索问题的解空间树&#xff0c;裁剪那些不能得到最优解的子树以提高搜索效率。 步骤&#xff1a; ① 定义解空间(对解编码); ② 确定解空间的树结构&#xff1b; ③ 按BFS等方式搜索&#xff1a; a.每个活…...

2025年人工智能专业可以考哪些证书呢?

人工智能是目前全球热门的专业领域之一&#xff0c;随着人工智能应用范围的不断扩大&#xff0c;越来越多的人开始关注人工智能相关证书的获取。那么&#xff0c;人工智能专业可以考什么证书呢&#xff1f;本文将为大家介绍人工智能相关证书的种类。 人工智能机器视觉应用工程师…...

仿真技术助力高尔夫球打破传统设计局限,实现球杆强大的功能

Altair近日宣布与业内领先的高尔夫装备制造商 Cleveland Golf 开展合作&#xff0c;以设计新款 HiBore XL 球杆。借助 Altair 先进的仿真与设计技术&#xff0c;Cleveland Golf 不断刷新高尔夫装备的行业标准&#xff0c;并在球杆产品设计方面实现突破。 Cleveland Golf 借助 A…...

微前端架构学习笔记

前言 之前遇到过一个需求&#xff0c;有两个项目分别由两个不同的部门负责&#xff0c;不同技术栈&#xff0c;不同代码仓库&#xff1a; A 项目是官网&#xff0c;负责展示产品亮点等信息&#xff0c;有多个入口可以进入 B 项目中的不同页面。B 项目是业务线&#xff0c;负责…...

DApp开发:从合约到系统快速上线解决方案

在区块链技术迅猛发展的今天&#xff0c;去中心化应用&#xff08;DApp&#xff09;作为区块链的一项重要应用&#xff0c;已经吸引了众多开发者和企业的关注。与传统应用程序不同&#xff0c;DApp依托于区块链的去中心化特点&#xff0c;实现了透明、安全、不可篡改等优势&…...

react 中 useState 中的 set 方法异步解决

使用 useEffect 监听状态的改变。 一、异步特性 在批量处理状态更新时&#xff0c;用以提高性能。 二、异步解决 使用useEffect来处理更新后的状态&#xff0c;useEffect钩子在组件渲染后执行&#xff0c;并且会在依赖项&#xff08;第二个参数&#xff09;发生变化时重新执…...

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是一个开源的应用容器引擎&#xff0c;基于Go语言并遵从Apache2.0协议开源。 Docker可以让开方子打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到…...

Selenium:强大的 Web 自动化测试工具

Selenium&#xff1a;强大的 Web 自动化测试工具 在当今的软件开发和测试领域&#xff0c;自动化工具的重要性日益凸显。Selenium 就是一款备受欢迎的 Web 自动化测试工具&#xff0c;它为开发者和测试人员提供了强大的功能和便利。本文将详细介绍 Selenium 是什么&#xff0c…...

设计模式 在PLM系统的应用场景介绍

通义灵码 设计模式在 PLM&#xff08;产品生命周期管理&#xff09;系统中扮演着重要的角色&#xff0c;可以帮助开发人员更好地组织代码、提高系统的可维护性和扩展性。以下是一些常见的设计模式及其在 PLM 系统中的应用场景&#xff1a; 1. 单例模式&#xff08;Singleton …...

C#请求https提示未能为 SSL/TLS 安全通道建立信任关系

System.Net.WebException: 基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系 &#xff0c;这个错误通常表明你的应用程序在尝试建立一个安全的 SSL/TLS 连接时遇到了问题。这通常是由于证书验证失败引起的。证书验证失败可能有几个原因&#xff1a; 证书不受信任&#…...

【人工智能】GaussDB数据库技术及应用

文章目录 前言一、数据库的基本概念及发展演进1、数据库概念DB2、数据库管理系统概念DBMS3、数据库与数据库管理系统的关系4、数据库的演进及发展5、数据模型的基本概念6、数据模型的要求和类型7、层次模型的基本概念8、网状模型的基本概念8、关系模型的基本概念9、非关系模型的…...

OpenAI12天 –第3天的实时更新,包括 ChatGPT、Sora、o1 等

OpenAI提前开启了假期&#xff0c;推出了为期 12 天的活动&#xff0c;名为“OpenAI 12 天”。在接下来的一周左右的每一天&#xff0c;OpenAI 都将发布现有产品的新更新以及新软件&#xff0c;包括备受期待的 Sora AI 视频生成器。 OpenAI 首席执行官 Sam Altman 表示&#x…...

删除Yocto中build-x9hp_ms_a12_vemmc_ap2/tmp/work/aarch64-sdrv-linux/package后再编译出错问题

前言&#xff1a; 在yocto编译中&#xff0c;一般会添加自己的package并编译打包到yocto里去。这个包里的内容有时候需要添加或者删除。但是我删除了文件&#xff0c;在编译完成烧录到板子上&#xff0c;里面还有自己删除的文件&#xff0c;于是就在yocto搜索哪个目录有该文件&…...

2024三掌柜赠书活动第三十五期:Redis 应用实例

目录 前言 Redis操作都会&#xff0c;却不知道怎么用&#xff1f; 关于《Redis 应用实例》 编辑推荐 内容简介 作者简介 图书目录 《Redis 应用实例》全书速览 拓展&#xff1a;Redis使用场景 实例1&#xff1a;缓存应用 场景描述 实现方法 具体代码示例 实例2&a…...

观察者模式的理解和实践

引言 在软件开发中&#xff0c;设计模式是开发者们为了解决常见的设计问题而总结出来的一系列最佳实践。观察者模式&#xff08;Observer Pattern&#xff09;是其中一种非常经典且使用率极高的设计模式。它主要用于定义对象之间的一对多关系&#xff0c;使得当一个对象的状态发…...

查看Windows系统上的Redis服务器是否设置了密码

查看 Redis 配置文件 1.找到 Redis 配置文件&#xff1a; 通常Redis配置文件名为 redis.windows.conf 或 redis.conf&#xff0c;它位于Redis安装目录中。 2.打开配置文件&#xff1a; 使用文本编辑器&#xff08;如Notepad、VS Code等&#xff09;打开该文件。 3.查找 re…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...