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

效果如下:

一、第一种方法

定义一个变量 selectKeysBack 用于维护所有勾选的数据value, 然后用 onSelect 拿到当前操作的数据,以及时候勾选。

这个方法便于拿到后端的数据之后用于回显

        1、template

<a-tableclass="custom-table-data":dataSource="state.dataSource":row-selection="{ selectedRowKeys: state.selectedRowKeys, onSelect: onRowChange }":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、method


<script setup>
const state = reactive({open: false,targetVlanValue: null,dataSource: [],noDataSource: [],// table绑定的值selectedRowKeys: [],selectedRowKeysStr: '',// 用于维护所有勾选的值selectKeysBack: [],
})/*** @description: 弹窗初始化* @param {*} params vlan请求参数* @param {*} selectKeys 回显的所有勾选key* @return {*} {void}*/
const init = (params, selectKeys = []) => {state.params = params;// 回显paginationParams.page = 1;state.selectKeysBack = selectKeys ? selectKeys.map(item => item * 1) : [];state.selectedRowKeys = selectKeys ? selectKeys.map(item => item * 1) : [];state.selectedRowKeysStr = state.selectedRowKeys.join(',');state.open = true;getVlanListFn(); // 查询的方法
};// 勾选改变
const onRowChange = (record, selected) => {// 点击行勾选, 用于维护我勾选的所有数据if (selected) {state.selectKeysBack.push(record.value);} else {state.selectKeysBack.splice(state.selectKeysBack.indexOf(record.value), 1);}// 将拿到的所有勾选数据 复制给 table绑定的值selectedRowKeysstate.selectedRowKeys = state.selectKeysBack;state.selectedRowKeysStr = state.selectedRowKeys.join(',');
};// 分页改变
const pageChange = (page, size) => {paginationParams.size == size ? (paginationParams.page = page) : (paginationParams.page = 1);paginationParams.size = size;// 分页改变的时候  将所有的数据复制给table绑定的值用于回显state.selectedRowKeys = state.selectKeysBack;getVlanListFn();
};
</script>

二、第二种方法 

1、效果:

第一页勾选了2, 3, 4

翻到第三页勾选24, 25

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

2、勾选思路:

        因为每次翻页 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)、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.rhkb.cn/news/326618.html

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

相关文章

类与对象(二)

封装 封装作为面向对象三大特性&#xff08;封装&#xff0c;继承&#xff0c;多态&#xff09;之一&#xff0c;那如何实现封装性的呢&#xff1f;就又得拿出上面的访问修饰限定符的图 public: 就是在任何地方都可以访问 protected: 涉及子类在介绍继承时详细介绍 default: …

STK12 RPO模块学习 (1)

一、背景介绍 在STK12中&#xff0c;在Astrogator的模块上开发了新的模块&#xff08;Rendezvous and proximity operations)。轨道交会接近通常来说是一个很复杂的过程。RPO实现需要对轨道动力学有一个清晰的理解&#xff0c;并且对于Astrogator模块具备很强的背景和经验&…

【教学类-55-02】20240512图层顺序挑战(四格长条纸加黑色边框、4*4、7张 、43200张去掉非7色有23040张,去掉重复样式有几种?)

作品展示 背景需求&#xff1a; 之前的代码吗存在几个问题&#xff0c;最大的问题是不能生成“”长条黑边框”” 【教学类-55-01】20240511图层顺序挑战&#xff08;四格长条纸&#xff09;&#xff08;4*4&#xff09;和“手工纸自制参考图”-CSDN博客文章浏览阅读485次&…

第十篇:数字堡垒:操作系统安全深度解析与实战指南

数字堡垒&#xff1a;操作系统安全深度解析与实战指南 1 *引言 1.1 数字世界的守护者 在遥远的比特海中&#xff0c;有一座名为“操作系统”的数字堡垒&#xff0c;它守护着我们的数据宝藏&#xff0c;确保每一次计算的航行都能安全抵达彼岸。然而&#xff0c;这片海域并非风…

记录:robot_localization传感器数据融合学习

一、参考资料 官方&#xff1a; http://wiki.ros.org/robot_localizationhttp://docs.ros.org/en/noetic/api/robot_localization/html/index.html2015 ROSCon 演讲官方网址&#xff08;youyube上也有这个视频&#xff09; 实践教程 https://kapernikov.com/the-ros-robot_…

深入理解Python的类,实例和type函数

问题起源&#xff1a; class t():pass s1 t() s2 type("Student2",(),{}) isinstance(s1, type), isinstance(s2, type)为什么第一个是false&#xff0c;第二个是true呢 根因定位&#xff1a; 在Python中&#xff0c;一切皆对象&#xff0c;类是对象&#xff0c…

Linux字符设备驱动设计

Linux字符设备驱动设计 概述 驱动的定义与功能 计算机系统中存在着大量的设备&#xff0c; 操作系统要求能够控制和管理这些硬件&#xff0c; 而驱动就是帮助操作系统完成这个任务。 驱动相当于硬件的接口&#xff0c; 它直接操作、 控制着我们的硬件&#xff0c; 操作系统通…

升级Microsoft 365后,SAP GUI中无法打开Excel的解决方案

最近&#xff0c;我们遇到了一个棘手的问题&#xff0c;一位客户在升级到Microsoft 365后&#xff0c;无法在SAP GUI中打开Excel。这个问题不仅影响了工作效率&#xff0c;也给用户的日常操作带来了不便。在本文中&#xff0c;我们将探讨问题的成因&#xff0c;并提供一种解决方…

gin自定义验证器+中文翻译

gin自定义验证器中文翻译 1、说明2、global.go3、validator.go4、eg&#xff1a;main.go5、调用接口测试 1、说明 gin官网自定义验证器给的例子相对比较简单&#xff0c;主要是语法级别&#xff0c;便于入门学习&#xff0c;并且没有给出翻译相关的处理&#xff0c;因此在这里记…

PaddleOCR_PP-Structure

静态IP设置 # 修改网卡配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens33# 修改文件内容 TYPEEthernet PROXY_METHODnone BROWSER_ONLYno BOOTPROTOstatic IPADDR192.168.15.132 NETMASK255.255.255.0 GATEWAY192.168.15.2 DEFROUTEyes IPV4_FAILURE_FATALno IPV6INIT…

YOLOv8小白中的小白安装环境教程!没一个字废话,看一遍不踩坑!

文章目录 去哪里下代码?怎么下代码?怎么装环境?命令行界面(CLI)指令和Python脚本区别?附录1 conda常用指令附录2 git常用指令附录3 项目代码文件作用去哪里下代码? 下载代码请大家直接去 YOLOv8的官方仓库下载,名字叫 ultralytics,有些镜像网站和个人发的等来历不明的代…

CMakeLists.txt语法规则:foreach 循环基本用法

一. 简介 cmake 中除了 if 条件判断之外&#xff0c;还支持循环语句&#xff0c;包括 foreach()循环、while()循环。 本文学习 CMakeLists.txt语法中的循环语句。 CMakeLists.txt语法中 有两种 循环实现方式&#xff1a;foreach循环与 while循环。 二. CMakeLists.txt语法规则…

解决 SyntaxError: Unexpected token ‘.‘ 报错问题

这个报错一般是编译问题&#xff0c;浏览器的版本过低没通过代码 解决办法&#xff1a; 在package.json文件中加上这个 "browserslist": ["> 1%","last 2 versions","not dead","not ie < 6","Android > 4&…

AI算法工程师课程学习-数学基础-高数1-微积分

基础数学学习目的&#xff1a;为机器学习(尤其是算法)和深度学习打基础。 学习路线&#xff1a;1.高中数学-->大学2.微积分-->3.线性代数-->4.概率论-->5.优化理论。&#xff08;因为自己40多岁年龄了&#xff0c;做了7年的.net开发&#xff0c;后面都一直在做软件…

工器具管理(基于若依)

文章目录 前言一、工器具管理项目总览 二、入库功能1. 前端1.1 界面展示1.2 具体操作实现1.3 js文件 2. 后端2.1 工器具信息回显2.2 工器具入库 三、领用功能1. 前端1.1 界面展示1.2 具体实现操作1.3 js文件 2. 后端2.1 工器具信息回显2.2 工器具领用 遇到的问题1. 同一页面展示…

2024 年中国大学生程序设计竞赛全国邀请赛(郑州)暨第六届CCPC河南省大学生程序 设计竞赛Problem L. Toxel 与 PCPC II

//sort bug下标 遍历dp. //没修负的bug肯定连续 #include<bits/stdc.h> using namespace std; #define int long long const int n1e611; int a,b,c[n],dp[n]; signed main() {ios::sync_with_stdio(false);cin.tie(0),cout.tie(0);cin>>a>>b;for(int i1;…

【JVM】从可达性分析,到JVM垃圾回收算法,再到垃圾收集器

《深入理解Java虚拟机》[1]中&#xff0c;有下面这么一段话&#xff1a; 在JVM的各个区域中&#xff0c;如虚拟机栈中&#xff0c;栈帧随着方法的进入和退出而有条不紊的执行者出栈和入栈操作。每一个栈帧中分配多少内存基本上是在类结构确定下来时就已知的&#xff08;尽管在…

抖音上有可以长久赚钱的副业吗?当然有,只有它最稳定长久!

大家好&#xff0c;我是电商糖果 现在有很多年轻人在大城市上班&#xff0c;发现辛辛苦苦一年也赚不到多少钱。 如果说自己有了房贷&#xff0c;车贷&#xff0c;那更是一点儿不敢歇。 为了可以有更多的收入&#xff0c;年轻人都希望可以靠着下班时间&#xff0c;找一个可以…

[前后端基础]图片详解

[前后端基础]图片传输与异步-CSDN博客 https://juejin.cn/post/6844903782959022093#heading-3 base64、file和blob用JS进行互转的方法大全【前端】_js base64转blob-CSDN博客 后端存储方式 对于第一种存储方式&#xff0c;我们前端直接将存储路径赋值给 src 属性即可轻松显示。…

在go-zero中使用jwt

gozero使用jwt 两个步骤 获取token验证token 前端获取token 先编写 jwt.api 文件&#xff0c;放在api目录下 syntax "v1"info (title: "type title here"desc: "type desc here"author: "type author here"email: &quo…