vue3 antd-vue 超简单方式实现a-table跨页勾选

一、效果如下:

第一页勾选了2, 3, 4

翻到第三页勾选24, 25

回显,如比返回第一页的时候触发分页改变, 在映射中的第一页的数据给到a-table绑定的state.selectedRowKeys即可,如下方法

二、勾选思路:

        因为每次翻页 a-table 勾选绑定的值都重置,因此用一个 selectRowKeyMap 变量进行映射, 只需要把勾选到的 key 添加到 以分页为 key , 当前页勾选的key为 value ,映射到selectRowKeyMap保存即可,即如下:

selectRowKeyMap: {1: [2, 3, 4],  // 第一页勾选了 2, 3, 42: [5, 6, 7],  // 第二页勾选了 5, 6, 73: [8, 9, 10]
},
1、实现核心代码:
        1)、template

        绑定勾选keys数组是 state.selectedRowKeys, 勾选触发的方法 onSelectChange


<a-tableclass="custom-table-data":dataSource="state.dataSource":row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }":row-key="record => record.value":columns="state.columns"bordered:scroll="{ x: state.tableWidth }":pagination="pagination":row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"></a-table>

        2)、javascript
<script setup>
import { computed, reactive } from 'vue';const state = reactive({open: false,targetVlanValue: null,dataSource: [],noDataSource: [],// 当前页勾选的keysselectedRowKeys: [],selectedRowKeysStr: '',columns: [],nocolumns: [],// 映射MapselectRowKeyMap: {},tableWidth: 1200
});// 分页改变
const pageChange = (page, size) => {paginationParams.size == size ? (paginationParams.page = page) : (paginationParams.page = 1);paginationParams.size = size;// 当分页改变的时候  回显当前页的勾选数据state.selectedRowKeys = state.selectRowKeyMap[paginationParams.page];// 接口方法getVlanListFn();
};// 触发选择
const onSelectChange = (selectedRowKeys, selectedRows) => {// 把当前勾选页勾选的数据存入mapstate.selectRowKeyMap[paginationParams.page] = selectedRowKeys;// 回显当前页勾选的keysstate.selectedRowKeys = selectedRowKeys;// 拿到所有勾选的keyslet resultKeys = [];for (let key in state.selectRowKeyMap) {resultKeys = resultKeys.concat(state.selectRowKeyMap[key]);}// 转换成字符串的形式用于展示state.selectedRowKeysStr = resultKeys.join(',');console.log('-------- state.selectRowKeyMap --------', { selectRowKeyMap: state.selectRowKeyMap, resultKeys });
};</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/9698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

管理层、团队、效能指标 如何平衡

管理层、团队、效能指标 如何平衡 效能指标效能指标是团队成长的唯一标准吗&#xff1f;管理层、团队和效能指标之间应该保持怎样的距离&#xff1f;效能治理容易踩进哪些陷阱&#xff1f;在团队中&#xff0c;效能治理最重要的是什么&#xff1f; 在说到管理层、团队和效能指标…

Netty底层数据交互源码分析

文章目录 1. 前题回顾2. 主线流程源码分析3. Netty底层的零拷贝4. ByteBuf内存池设计 书接上文 1. 前题回顾 上一篇博客我们分析了Netty服务端启动的底层原理&#xff0c;主要就是将EventLoop里面的线程注册到了Select中&#xff0c;然后调用select方法监听客户端连接&#xf…

深入了解模拟和存根:提高单元测试质量的关键技术

一、引言 在进行单元测试时&#xff0c;我们经常会遇到对外部资源的依赖&#xff0c;如数据库、网络接口等。模拟&#xff08;Mocking&#xff09;和存根&#xff08;Stubbing&#xff09;是两种帮助我们模拟这些外部资源&#xff0c;使我们能够在隔离环境中测试单元的方法。在…

iOS面试题链接汇总

iOS开发三年经验 靠这份面试题让我从15k到25k - 简书 2021年&#xff0c;整理的iOS高频面试题及答案&#xff08;总会有你需要的&#xff09; - 知乎 iOS面试&#xff08;内含面试全流程&#xff0c;面试准备工作面试题等&#xff09;-CSDN博客 runtime: 阿里、字节 一套高效…

Java中静态代理和动态代理设计模式应用实例举例?

静态代理实例 假设我们有一个需求&#xff0c;要记录一个服务接口IService的所有方法调用的开始和结束时间&#xff0c;以此来监控服务的性能。我们可以使用静态代理模式来实现这个需求。 1. 定义服务接口 IService.java: Java 1public interface IService { 2 void serv…

分布式任务调度框架xxl-job使用手册

官网地址和文档地址&#xff1a;https://www.xuxueli.com/xxl-job/ 一、快速入门 1.1 下载源码 https://github.com/xuxueli/xxl-job https://gitee.com/xuxueli0323/xxl-job 下载完成后有以下模块 1.2 初始化数据库 官方指定mysql8.0&#xff0c;但我是mysql5.7 执行/xxl…

PyQt6--Python桌面开发(6.QLineEdit单行文本框)

QLineEdit单行文本框 import sys import time from PyQt6.QtGui import QValidator,QIntValidator from PyQt6.QtWidgets import QApplication,QLabel,QLineEdit from PyQt6 import uicif __name__ __main__:appQApplication(sys.argv)uiuic.loadUi("./QLine单行文本框.u…

Qt 6.7功能介绍

Qt 6.7为我们所有喜欢在构建现代应用程序和用户体验时获得乐趣的人提供了许多大大小小的改进。一些新增内容作为技术预览发布&#xff0c;接下来我们就一起来看看吧&#xff1a; 将C20与Qt一起使用 对于许多编译器工具链来说&#xff0c;C20仍然是可选的和实验性的&#xff0c;…

PVE 脚本工具 pve_source | Pve_Tools

pve_source 安装 wget -q -O /root/pve_source.tar.gz https://bbs.x86pi.cn/file/topic/2023-11-28/file/01ac88d7d2b840cb88c15cb5e19d4305b2.gz && tar zxvf /root/pve_source.tar.gz && /root/./pve_source 脚本加载成功出现使用协议&#xff0c;输入 Y&…

台服dnf局域网搭建,学习用笔记

台服dnf局域网搭建 前置条件虚拟机初始化上传安装脚本以及其他文件至虚拟机密钥publickey.pem客户端配置如果IP地址填写有误&#xff0c;批量修改IP地址 前置条件 安装有vmvarecentos7.6镜像&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/centos-vault/7.6.1810/isos/x86…

Python注意事项【自我维护版】

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 本篇博客在之前的博客上进行的维护 创建Python…

Day7 字符串和常用数据结构

文章目录 字符串和常用数据结构使用字符串使用列表生成式和生成器使用元组使用集合使用字典练习练习1&#xff1a;在屏幕上显示跑马灯文字。练习2&#xff1a;设计一个函数产生指定长度的验证码&#xff0c;验证码由大小写字母和数字构成。练习3&#xff1a;设计一个函数返回给…

linux下使用jexus部署aspnet站点

1.运行环境 Centos 7 安装dos2unix工具 yum install dos2unix 安装jexus curl https://jexus.org/release/x64/install.sh|sudo sh2.网站部署 2.1. 将windows下的网站发布包Msc_qingdao_admin.zip上传到linux中&#xff0c; 然后解压后放入/var/www(没有则创建)目录下 r…

福昕PDF阅读器取消手型工具鼠标点击翻页

前言&#xff1a; 本文介绍如何关闭福昕PDF阅读器取消手型工具鼠标点击翻页&#xff0c;因为这样真的很容易误触发PDF翻页&#xff0c;使用起来让人窝火。 引用&#xff1a; NA 正文&#xff1a; 新版的福昕PDF阅读器默认打开了“使用手型工具阅读文章”这个勾选项&#x…

超全MySQL锁机制介绍

前言 MySQL作为关系型数据库管理系统中的佼佼者&#xff0c;为了保证数据的一致性和完整性&#xff0c;在并发控制方面采用了锁机制。锁机制是数据库管理系统用于控制对共享资源的访问&#xff0c;避免多个事务同时修改同一数据造成的数据不一致问题。了解MySQL的锁机制对于数…

python如何使用BlockingScheduler设置钉钉定时自动工作通知?

需求描述 每周五上午11点&#xff0c;通过钉钉工作通知向特定人员推送特定文本内容&#xff0c;文本内容来自数据库计算。 代码 from apscheduler.schedulers.blocking import BlockingScheduler from sqlalchemy import create_engine import requests import pandas as pd…

中信证券:量子产业蓄势待发,看好相关投资机会!

在1994年&#xff0c;数学家彼得肖尔&#xff08;Peter Shor&#xff09;首次提出了现在广为人知的肖尔算法&#xff0c;那时许多人认为量子计算机的概念遥不可及、纯属幻想。然而&#xff0c;到了2024年&#xff0c;全球正深入探讨量子科技在现实世界的应用&#xff0c;以及所…

K8S中的弹性云服务如何搭建,可能遇到的问题,如何解决!(稳啦!!!!全都稳啦!!!)

首先我们先来了解一下这玩意儿~~~ 啥是弹性云服务&#xff08;Elastic Cloud Service&#xff09;&#xff1f;&#xff1f;&#xff1f;&#xff1f; 弹性云服务&#xff08;ECS&#xff09;是一种基于云计算技术的虚拟服务器&#xff0c;由vCPU、内存、磁盘等组成的获取方便…

pytorch技术栈

张量&#xff08;Tensors&#xff09;&#xff1a;PyTorch的核心数据结构&#xff0c;用于存储和操作多维数组。 自动微分&#xff08;Autograd&#xff09;&#xff1a;PyTorch的自动微分引擎&#xff0c;可以自动计算梯度&#xff0c;这对于训练神经网络至关重要。 数据加载…

Git 如何管理标签命令(tag)

1.查看本地仓库tag --1.查看本地仓库tag UserDESKTOP-2NRT2ST MINGW64 /e/GITROOT/STARiBOSS/STARiBOSS-5GCA (gw_frontend_master) $ git tag 1stBossUpgrade V10.0.1_20220224_test V10.0.1_20220301_test tag-gwfrontend-V1.0.12-230625 tag-gw_frontend-23.08.29 tag-gw_f…