Debug-021-el-table实现分页多选的效果(切换分页,仍可以保持前一页的选中效果)
前情提要:
这个功能实现很久了,但是一直没有留意如何实现,今天想分享一下。具体就是我们展示table数据的时候,表格中的数据多数情况是分页展示,毕竟数据量太多,分页的确是有必要的。那么我们有业务需要给表格第一列添加selection选择的属性,以方便选择每一行的数据做一个批量的动作时,就会存在只能选择当前页码的数据,不能选择其它页面的选项,因为点击分页就重新调接口拿新的表格数据了,这的确是个问题。
思路:(1)我第一个想到的常规思路是去拿el-table的实例,看上面是否有方法或者变量会存所有选择过的选项,当然,当然如果翻页,我就重复往这里去塞数据,不过这个思路很快被我打消了。因为实例上方法很多,这样效率太低,很快我就还是走了第二条路。
(2)那就是去element-plus的文档看看,关于这个el-table多选是否有属性支持翻页多选,果然是有的(经验之谈:除非很熟悉的属性方法,否则以后还是先去官网看文档比较快)
elementUI官网的el-table中可以找到,截图如下:


如果是vue3使用element-plus的话,官网的el-table里也有这个属性。(这种优秀的功能一般不会移除)


正如文档所述,这两个属性是要搭配使用才有效果的,这种情况作为前端程序员,我想说真是太妙了,用起来很爽,因为加入没有这些封装好的组件和方法属性,那么前端的工作又会增加很多麻烦。
以下只截取部分代码,那两个属性是必须要配的,其次getRowKeys中获取的id必须是唯一的。
<el-tableref="tableref":data="tableData"header-cell-class-name="header-cell"cell-class-name="row-cell":row-key="getRowKeys":default-sort="{ prop: sortPropsHead, order: 'descending' }"@cell-click="handleCellClickCell"@cell-mouse-enter="handleCellMouseEnter"@select="handleSelectionChange"@select-all="handleSelectionChange"@row-click="handleRowClick"@mouseover.native="clearScroll"@mouseleave.native="createScroll"@sort-change="handleSortChange"><el-table-column v-if="isSelected" type="selection" :reserve-selection="true" :selectable="selectable" /><el-table-column type="index" label="序号" width="60" />// getRowKeys方法中一定要返回的是能确保每一行的唯一id
相关文章:
Debug-021-el-table实现分页多选的效果(切换分页,仍可以保持前一页的选中效果)
前情提要: 这个功能实现很久了,但是一直没有留意如何实现,今天想分享一下。具体就是我们展示table数据的时候,表格中的数据多数情况是分页展示,毕竟数据量太多,分页的确是有必要的。那么我们有业务需要给表…...
FPGA开发——DS18B20读取温度并且在数码管上显示
一、简介 在上一篇文章中我们对于DS18B20的相关理论进行了详细的解释,同时也对怎样使用DS18B20进行了一个简单的叙述。在这篇文章我们通过工程来实现DS18B20的温度读取并且实现在数码管伤显示。 1、基本实现思路 根据不同时刻的操作,我们可以使用一个状…...
电流测量分流电阻
电流测量分流电阻 测量电流的设备称为安培计。大多数现代安培计测量已知电阻的精密电阻上的电压降。电流的计算使用欧姆定律:我五R 大多数电流表都内置电阻器来测量电流。但是,当电流对于电流表来说太高时,需要不同的设置。解决方案是将电流…...
MES系统:智能化排班排产的全面解决方案
MES(制造执行系统)管理系统通过集成多种先进技术、实时数据采集与分析、优化算法应用以及与其他系统的协同工作,实现了智能化排班排产功能。以下是该功能的详细实现方式: 数据集成与实时采集:MES系统与ERP、SCM、设备管…...
50道深度NLP和人工智能领域面试题+答案
编者按:分享一个很硬核的免费人工智能学习网站,通俗易懂,风趣幽默, 可以当故事来看,轻松学习。 什么是自然语言处理(NLP)?自然语言处理是一种人工智能领域,致力于使计算机…...
最小矩阵宽度(85%用例)C卷(JavaPythonC++Node.jsC语言)
给定一个矩阵,包含N*M个整数,和一个包含K个整数的数组。 现在要求在这个矩阵中找一个宽度最小的子矩阵,要求子矩阵包含数组中所有的整数。 输入描述: 第一行输入两个正整数N,M,表示矩阵大小。 接下来N行M列表示矩阵内容。 下一行包含一个正整数K。 下一行包含K个整数,…...
STM32数据按字符截取与转换
目录 1. 截取2. 转换 1. 截取 以SW,33,55,78,\r\n为例 char* pa,pb,pc,pd,pe; uint8_t usart5_rxsavebuf[] "SW,12,32,33,55,78,\r\n";strtok((char *)usart5_rxsavebuf, ","); pa strtok(NULL, ","); pb strtok(NULL, ","); pc …...
使用kubeadm快速部署一套K8S集群
一、Kubernetes概述 1.1 Kubernetes是什么 Kubernetes是Google在2014年开源的一个容器集群管理系统,Kubernetes简称K8S。 K8S用于容器化应用程序的部署,扩展和管理。 K8S提供了容器编排,资源调度,弹性伸缩,部署管理…...
【Kotlin】在Kotlin项目中使用AspectJ
前言 AOP编程在Java开发中是一个非常火热的话题,最著名的库为AspectJ Kotlin项目中,通过Gradle插件,也能够使用该库,这是我们下面讲解的重点 由于AspectJ的原理是在预编译阶段,通过插件修改代码,生成代理…...
web实现drag拖拽布局
这种拖拽布局功能其实在电脑操作系统或者桌面应用里面是经常使用的基础功能,只是有时候在进行web开发的时候,对这个功能需求量不够明显,但却是很好用,也很实用。能够让用户自己拖拽布局,方便查看某个区域更多内容&…...
Linux网络编程—listen、accept、connect
一、网络四件套 #include <sys/types.h> //头文件;这四个文件一包,基本网络就无问题了; #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> 二、listen 监听:将套…...
logback.xml自定义标签节点
logback.xml自定义标签节点 问题 <?xml version"1.0" encoding"UTF-8" ?> <configuration scan"true" scanPeriod"60 seconds" debug"false"><appender name"console" class"ch.qos.logb…...
探索DevExpress WinForms:.NET世界中的UI库之星
开篇概述 作为一名资深的技术专家,我对.NET开发和UI库有着深入的了解。今天,我要向您介绍的是DevExpress WinForms —— 一款在.NET开发领域广受欢迎的开源UI库。它以其强大的功能、优雅的设计和卓越的性能,成为了众多开发者的首选。 主体讲解…...
零基础学习Redis(4) -- 常用数据结构介绍
我们之前提到过,redis中key只能是字符串类型,而value有多种类型。 redis中的数据结构有自己独特的实现方式能根据特定的场景进行优化 1. string(字符串) 内部编码: raw:最基本的字符串,类比我们平常使用的Stringin…...
Python实现水果忍者(开源)
一、整体介绍: 1.1 前言: 游戏代码基于Python制作经典游戏案例-水果忍者做出一些改动,优化并增加了一些功能。作为自己Python阶段学习的结束作品,文章最后有源码链接。 1.2 Python主要知识: (1…...
Windows自动化3️⃣WindowsPC拽起时长问题解决方案
问题描述: Windows应用从点击, 到加载完成, 需要一定的时间后台是否已经启动过当前程序?启动后, 前后台应用关闭问题等 我的解决思路: 首先检查进程 , 当前进程是否在运行, 如果进程在运行, 需要先关闭进程 关闭进程后, 开始我们的自动化流程, 去拽起 应用 拽起应用后, 可以先…...
一篇文章入门Java虚拟机(JVM)
JVM全称是Java Virtual Machine,中文译名Java虚拟机。本质上是一个运行在计算机上的程序 一,JVM的功能 功能描述解释和运行对字节码文件中的指令,实时的解释成机器码,让计算机执行内存管理自动为对象、方法等分配内存࿱…...
vue3里面的组件实例类型(包括原生的html标签类型)
在 通过 ref(null)获取组件的时候,我们想要为 组件标注组件类型,可以通过 any 类型来进行标注,但是很明显,这些的代码很不优雅,所以我们可以利用 vue3 里面的 InstanceType 来进行类型标注 这是…...
谷歌正式开放Imagen 3访问权限!OpenAI的GPT-4o连续两周迎来两次更新!|AI日报
文章推荐 马斯克Grok 2打响反内容限制第一枪,盛大网络狂欢!一起来看网友花式整活! GPT-4o一天迎来2大劲敌!Grok-2发布测试版!Gemini Live即刻上线! 今日热点 OpenAI发布chatgpt-4o-latest AI模型&#…...
C语言内存操作函数
目录 一. C语言内存操作函数 1. memcpy的使用和模拟实现 2. memmove函数 3. memset函数 4. memcmp函数 一. C语言内存操作函数 随着知识的不断积累,我们所想要实现的目标程序就会更加复杂,今天我们来学习一个新的知识叫做C语言内存操作函数&#x…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
