Debug-021-el-table实现分页多选的效果(切换分页,仍可以保持前一页的选中效果)

2024-08-20 23:04

本文主要是介绍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实现分页多选的效果(切换分页,仍可以保持前一页的选中效果)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1091427

相关文章

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一:创建批处理文件并添加到PATH1

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

canal实现mysql数据同步的详细过程

《canal实现mysql数据同步的详细过程》:本文主要介绍canal实现mysql数据同步的详细过程,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的... 目录1、canal下载2、mysql同步用户创建和授权3、canal admin安装和启动4、canal

Nexus安装和启动的实现教程

《Nexus安装和启动的实现教程》:本文主要介绍Nexus安装和启动的实现教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Nexus下载二、Nexus安装和启动三、关闭Nexus总结一、Nexus下载官方下载链接:DownloadWindows系统根

SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程

《SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程》LiteFlow是一款专注于逻辑驱动流程编排的轻量级框架,它以组件化方式快速构建和执行业务流程,有效解耦复杂业务逻辑,下面给大... 目录一、基础概念1.1 组件(Component)1.2 规则(Rule)1.3 上下文(Conte

MySQL 横向衍生表(Lateral Derived Tables)的实现

《MySQL横向衍生表(LateralDerivedTables)的实现》横向衍生表适用于在需要通过子查询获取中间结果集的场景,相对于普通衍生表,横向衍生表可以引用在其之前出现过的表名,本文就来... 目录一、横向衍生表用法示例1.1 用法示例1.2 使用建议前面我们介绍过mysql中的衍生表(From子句

Mybatis的分页实现方式

《Mybatis的分页实现方式》MyBatis的分页实现方式主要有以下几种,每种方式适用于不同的场景,且在性能、灵活性和代码侵入性上有所差异,对Mybatis的分页实现方式感兴趣的朋友一起看看吧... 目录​1. 原生 SQL 分页(物理分页)​​2. RowBounds 分页(逻辑分页)​​3. Page

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

MYSQL查询结果实现发送给客户端

《MYSQL查询结果实现发送给客户端》:本文主要介绍MYSQL查询结果实现发送给客户端方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql取数据和发数据的流程(边读边发)Sending to clientSending DataLRU(Least Rec