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

news2024/11/17 5:27:11

一、效果如下:

第一页勾选了2, 3, 4

翻到第三页勾选24, 25

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

二、勾选思路:

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

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

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


<a-table
  class="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: [],

  // 当前页勾选的keys
  selectedRowKeys: [],
  selectedRowKeysStr: '',
  columns: [],
  nocolumns: [],
 
  // 映射Map
  selectRowKeyMap: {},
  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) => {
  // 把当前勾选页勾选的数据存入map
  state.selectRowKeyMap[paginationParams.page] = selectedRowKeys;
  // 回显当前页勾选的keys
  state.selectedRowKeys = selectedRowKeys;

  // 拿到所有勾选的keys
  let 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.coloradmin.cn/o/1662877.html

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

相关文章

【深度学习】Diffusion扩散模型原理解析1

1、前言 diffusion&#xff0c;这几年一直很火的模型&#xff0c;比如这段时间在网上的文生图大模型——Stable diffusion。就是以diffusion作为基底模型&#xff0c;但由于该模型与VAE那边&#xff0c;都涉及了较多了概率论知识&#xff0c;实在让人望而却步。所以&#xff0…

idea-自我快捷键-2

1. 书签 创建书签&#xff1a; 创建书签&#xff1a;F11创建特色标记书签&#xff1a;Ctrl F11快速添加助记符书签&#xff1a;ctrl shift 数字键 查看书签&#xff1a; shift F11快速定位到助记符书签&#xff1a;Ctrl 数字键 删除书签&#xff1a; delete 2. 自动…

Android使用Chaquo来运行Python的librosa的相关代码【有详细案例教程】

在某些情况下&#xff0c;我们可能需要在android上运行python的代码&#xff0c;那么常见的解释器有很多&#xff0c;目前比较成熟的就是chaquo&#xff0c;它适配的第三方机器学习的库很多&#xff0c;下面是它的简单使用教程 1.环境的搭建 1.1 在Android studio中新建安卓工…

SpringSecurity + JWT实现登录认证

前置基础请参考&#xff1a;SpringSecurity入门-CSDN博客 配置&#xff1a; pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.0.5</version></p…

网络1--通信过程的理解

1.封装与解包 通信的过程就是不断的封装和解包的过程 封装即就是按照“应用”“传输” “网络” “链路” 层&#xff0c;封装给每一层都加上相应的包头&#xff08;每一层都有协议&#xff0c;&#xff09;解包就是接受到的包文被一层层去掉相对应的包头。 任何一层的协议都…

【Qt】界面定制艺术:光标(cursor)、字体(font)、提示(toolTip)、焦点(focusPolicy)与样式表(styleSheet)的深度探索

文章目录 前言&#xff1a;1. cursor: 设置按钮的光标2. front&#xff1a;设置字体3. toolTip: 鼠标悬停提示4. focusPolicy&#xff1a;设置控件获取到焦点的策略5. styleSheet : 样式表总结&#xff1a; 前言&#xff1a; 在现代软件开发中&#xff0c;用户界面(UI)的设计和…

记录一些常用的网站

开发者搜索-Beta-让技术搜索更简单高效 (baidu.com)https://kaifa.baidu.com/JSON在线 | JSON解析格式化—SO JSON在线工具https://www.sojson.com/DCloud 插件市场https://ext.dcloud.net.cn/uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/在线学习书籍https://gi…

C++学习第三十课:C++异常处理机制应用

一、引言 在编程过程中&#xff0c;我们经常会遇到一些无法预见或难以预料的特殊情况&#xff0c;这些情况统称为“异常”。异常可能是由用户输入错误、资源不足、硬件故障或程序逻辑错误等原因引起的。当这些异常情况发生时&#xff0c;如果程序没有适当的处理机制&#xff0…

MySQL数据库表的创建DDL语句(21-25)

21.用户反馈表 CREATE TABLE 7_feedback (feedbackId int(11) NOT NULL AUTO_INCREMENT COMMENT ID,feedbackType int(4) NOT NULL DEFAULT 0 COMMENT 反馈类型&#xff0c;内容来自源系统基础数据表,userId int(11) DEFAULT NULL COMMENT 反馈者ID,creatTime datetime NOT NU…

商场综合体能源监管平台,实现能源高效管理

商场作为大型综合体建筑&#xff0c;其能源消耗一直是备受关注的问题。为了有效管理商场能耗&#xff0c;提高商场能源效率&#xff0c;商场综合体能源监管平台应运而生。 商场综合体能源监管平台可通过软硬件一起进行节能监管&#xff0c;硬件设备包括各种传感器、监测仪表和…

ArcGIS10.2系列许可到期解决方案

本文手机码字&#xff0c;不排版了。 昨晚&#xff08;2021\12\17&#xff09;12点后&#xff0c;收到很多学员反馈 ArcGIS10.2系列软件突然崩溃。更有的&#xff0c;今天全单位崩溃。 ​ 提示许可15天内到期。之前大部分许可是到2021年1月1日的。 ​ 后续的版本许可都是永久的…

哪些企业需要用OV 证书?怎么获取OV证书?看这里

OV证书相当于DV证书而言&#xff0c;其安全等级高&#xff0c;兼容性强&#xff0c;稳定性好&#xff0c;那么哪些企业适用OV证书呢&#xff1f; 1 政府与公共服务网站 政府机构及提供公共服务的网站&#xff0c;必须确保数据的隐私和安全&#xff0c;有助于增强公众对在线服务…

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

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

拥有蝴蝶效应的爬虫如何进行防护

美国气象学家爱德华罗伦兹&#xff08;Edward N.Lorenz&#xff09;1963年在一篇提交纽约科学院的论文中分析了一个叫做蝴蝶效应的理论&#xff1a;“一个气象学家提及&#xff0c;如果这个理论被证明正确&#xff0c;一只海鸥扇动翅膀足以永远改变天气变化。”在以后的演讲和论…

输出正射图时,分辨率怎么填写整幅输出?

答&#xff1a;设置完输出路径、分辨率、坐标系后&#xff0c;会给图像宽高&#xff0c;根据最大值设置分幅尺寸就可以。 DasViewer是由大势智慧自主研发的免费的实景三维模型浏览器,采用多细节层次模型逐步自适应加载技术,让用户在极低的电脑配置下,也能流畅的加载较大规模实景…

红龙工业设备制造有限公司亮相2024杭州数字物流技术设备展

参展企业介绍 温州红龙工业设备制造有限公司成立于2015年11月。是中国先进的工业皮带设备研发制造和工业皮带整体解决方案运营服务商&#xff0c;现主营皮带接头机、皮带热压机、皮带接驳机、皮带打齿机、输送带打齿机、输送带分层级、输送带导条机、输送带裁切机、高频机等工业…

前端开发指导

前端开发指导 本文介绍了配置前端开发环境需要的软件、配置项等,指导如何开始进行UDM部门前端开发的全流程。本文以Windows系统下在Microsoft Virtual Studio Code中开发为基础。 一、综述 目标:零基础或者新员工依照此文档,能够完成开发环境的搭建及熟悉测试环境的搭建。…

陪诊陪护小程序基于ThinkPHP + FastAdmin + 微信小程序开发(源码搭建/上线/运营/售后/更新

支持多运营区&#xff0c;陪护师、推广者等完整闭环功能&#xff0c;快速搭建陪护业务平台。 消息通知&#xff1a;系统可以向用户发送订单状态变更、陪诊员信息更新等通知&#xff0c;确保用户及时了解相关信息&#xff0c;提高用户体验。 订单管理&#xff1a;患者可以查看自…

QT 小项目:登录注册账号和忘记密码(下一章实现远程登录)

一、环境搭建 参考上一章环境 二、项目工程目录 三、主要源程序如下&#xff1a; registeraccountwindow.cpp 窗口初始化&#xff1a; void registeraccountWindow::reginit() {//去掉&#xff1f;号this->setWindowFlags(windowFlags() & ~Qt::WindowContextHelpButt…

《数据结构与算法之美》学习笔记一

前言&#xff1a;今天开始学习极客时间的课程《数据结构与算法之美》。为撒要学习这个&#xff1f;因为做力扣题太费劲了&#xff0c;自己的基础太差了&#xff01;所以要学习学习。开一个系列记录一下学习笔记。认真学吧&#xff0c;学有所获才不负韶华&#xff01;之前就学过…