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

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实现分页多选的效果(切换分页,仍可以保持前一页的选中效果)

前情提要&#xff1a; 这个功能实现很久了&#xff0c;但是一直没有留意如何实现&#xff0c;今天想分享一下。具体就是我们展示table数据的时候&#xff0c;表格中的数据多数情况是分页展示&#xff0c;毕竟数据量太多&#xff0c;分页的确是有必要的。那么我们有业务需要给表…...

FPGA开发——DS18B20读取温度并且在数码管上显示

一、简介 在上一篇文章中我们对于DS18B20的相关理论进行了详细的解释&#xff0c;同时也对怎样使用DS18B20进行了一个简单的叙述。在这篇文章我们通过工程来实现DS18B20的温度读取并且实现在数码管伤显示。 1、基本实现思路 根据不同时刻的操作&#xff0c;我们可以使用一个状…...

电流测量分流电阻

电流测量分流电阻 测量电流的设备称为安培计。大多数现代安培计测量已知电阻的精密电阻上的电压降。电流的计算使用欧姆定律&#xff1a;我五R 大多数电流表都内置电阻器来测量电流。但是&#xff0c;当电流对于电流表来说太高时&#xff0c;需要不同的设置。解决方案是将电流…...

MES系统:智能化排班排产的全面解决方案

MES&#xff08;制造执行系统&#xff09;管理系统通过集成多种先进技术、实时数据采集与分析、优化算法应用以及与其他系统的协同工作&#xff0c;实现了智能化排班排产功能。以下是该功能的详细实现方式&#xff1a; 数据集成与实时采集&#xff1a;MES系统与ERP、SCM、设备管…...

50道深度NLP和人工智能领域面试题+答案

编者按&#xff1a;分享一个很硬核的免费人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c; 可以当故事来看&#xff0c;轻松学习。 什么是自然语言处理&#xff08;NLP&#xff09;&#xff1f;自然语言处理是一种人工智能领域&#xff0c;致力于使计算机…...

最小矩阵宽度(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年开源的一个容器集群管理系统&#xff0c;Kubernetes简称K8S。 K8S用于容器化应用程序的部署&#xff0c;扩展和管理。 K8S提供了容器编排&#xff0c;资源调度&#xff0c;弹性伸缩&#xff0c;部署管理…...

【Kotlin】在Kotlin项目中使用AspectJ

前言 AOP编程在Java开发中是一个非常火热的话题&#xff0c;最著名的库为AspectJ Kotlin项目中&#xff0c;通过Gradle插件&#xff0c;也能够使用该库&#xff0c;这是我们下面讲解的重点 由于AspectJ的原理是在预编译阶段&#xff0c;通过插件修改代码&#xff0c;生成代理…...

web实现drag拖拽布局

这种拖拽布局功能其实在电脑操作系统或者桌面应用里面是经常使用的基础功能&#xff0c;只是有时候在进行web开发的时候&#xff0c;对这个功能需求量不够明显&#xff0c;但却是很好用&#xff0c;也很实用。能够让用户自己拖拽布局&#xff0c;方便查看某个区域更多内容&…...

Linux网络编程—listen、accept、connect

一、网络四件套 #include <sys/types.h> //头文件&#xff1b;这四个文件一包&#xff0c;基本网络就无问题了&#xff1b; #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> 二、listen 监听&#xff1a;将套…...

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库之星

开篇概述 作为一名资深的技术专家&#xff0c;我对.NET开发和UI库有着深入的了解。今天&#xff0c;我要向您介绍的是DevExpress WinForms —— 一款在.NET开发领域广受欢迎的开源UI库。它以其强大的功能、优雅的设计和卓越的性能&#xff0c;成为了众多开发者的首选。 主体讲解…...

零基础学习Redis(4) -- 常用数据结构介绍

我们之前提到过&#xff0c;redis中key只能是字符串类型&#xff0c;而value有多种类型。 redis中的数据结构有自己独特的实现方式能根据特定的场景进行优化 1. string(字符串) 内部编码&#xff1a; raw&#xff1a;最基本的字符串&#xff0c;类比我们平常使用的Stringin…...

Python实现水果忍者(开源)

一、整体介绍&#xff1a; 1.1 前言&#xff1a; 游戏代码基于Python制作经典游戏案例-水果忍者做出一些改动&#xff0c;优化并增加了一些功能。作为自己Python阶段学习的结束作品&#xff0c;文章最后有源码链接。 1.2 Python主要知识&#xff1a; &#xff08;1&#xf…...

Windows自动化3️⃣WindowsPC拽起时长问题解决方案

问题描述: Windows应用从点击, 到加载完成, 需要一定的时间后台是否已经启动过当前程序?启动后, 前后台应用关闭问题等 我的解决思路: 首先检查进程 , 当前进程是否在运行, 如果进程在运行, 需要先关闭进程 关闭进程后, 开始我们的自动化流程, 去拽起 应用 拽起应用后, 可以先…...

一篇文章入门Java虚拟机(JVM)

JVM全称是Java Virtual Machine&#xff0c;中文译名Java虚拟机。本质上是一个运行在计算机上的程序 一&#xff0c;JVM的功能 功能描述解释和运行对字节码文件中的指令&#xff0c;实时的解释成机器码&#xff0c;让计算机执行内存管理自动为对象、方法等分配内存&#xff1…...

vue3里面的组件实例类型(包括原生的html标签类型)

在 通过 ref&#xff08;null&#xff09;获取组件的时候&#xff0c;我们想要为 组件标注组件类型&#xff0c;可以通过 any 类型来进行标注&#xff0c;但是很明显&#xff0c;这些的代码很不优雅&#xff0c;所以我们可以利用 vue3 里面的 InstanceType 来进行类型标注 这是…...

谷歌正式开放Imagen 3访问权限!OpenAI的GPT-4o连续两周迎来两次更新!|AI日报

文章推荐 马斯克Grok 2打响反内容限制第一枪&#xff0c;盛大网络狂欢&#xff01;一起来看网友花式整活&#xff01; GPT-4o一天迎来2大劲敌&#xff01;Grok-2发布测试版&#xff01;Gemini Live即刻上线&#xff01; 今日热点 OpenAI发布chatgpt-4o-latest AI模型&#…...

C语言内存操作函数

目录 一. C语言内存操作函数 1. memcpy的使用和模拟实现 2. memmove函数 3. memset函数 4. memcmp函数 一. C语言内存操作函数 随着知识的不断积累&#xff0c;我们所想要实现的目标程序就会更加复杂&#xff0c;今天我们来学习一个新的知识叫做C语言内存操作函数&#x…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

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

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

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

以太网PHY布局布线指南

1. 简介 对于以太网布局布线遵循以下准则很重要&#xff0c;因为这将有助于减少信号发射&#xff0c;最大程度地减少噪声&#xff0c;确保器件作用&#xff0c;最大程度地减少泄漏并提高信号质量。 2. PHY设计准则 2.1 DRC错误检查 首先检查DRC规则是否设置正确&#xff0c;然…...