react antd table表格点击一行选中数据的方法

一、前言

在这里插入图片描述

antd的table,默认是点击左边的单选/复选按钮,才能选中一行数据;

现在想实现点击右边的部分,也可以触发操作选中这行数据。

可以使用onRow实现,样例如下。

二、代码

1.表格样式部分

//表格table样式部分{isRadio ?<TabledataSource={data.list}onRow={(record) => ({onClick: () => {this.selectRow(record);},})}rowSelection={{type: 'radio',selectedRowKeys: selectedIdsInSearchTab,//onChange: this.onSelectChange,}} // 表格是否可复选,加type是单选,去掉是多选columns={this.getColumns()}rowKey={record => record.id}pagination={false}loading={loading}size="middle"borderedscroll={{ x: 1100 }}/> :<TabledataSource={data.list}onRow={(record) => ({onClick: () => {this.selectRow(record);},})}rowSelection={{selectedRowKeys: selectedIdsInSearchTab,//onChange: this.onSelectChange,}} // 表格是否可复选,加type是单选,去掉是多选columns={this.getColumns()}rowKey={record => record.id}pagination={false}loading={loading}size="middle"borderedscroll={{ x: 1100 }}/>}

说明:
(1)isRadio 是自己写的一个变量,用来区分是单选表格还是多选表格

(2)onRowthis.selectRow(record)方法是核心,用来实现点击一行数据即可选中(其实是点击 单选/多选按钮右边的部分时,触发这个方法)

(3)//onChange: this.onSelectChange,这个方法是点击左边的单选/多选按钮时,会触发;

但是由于框架自身bug,翻页多选数据的话,id数组没有问题、内容数组会只保留当前页、无法保留前几页选中的内容,所以在此注释了(后果是点击左边的单选/多选按钮没有反应,只能点击行右边部分进行选择/取消选择,也许也能接受?)

(4)加上 type: 'radio',表格就会展示为单选按钮;去掉,表格默认展示为多选按钮

(5)selectedRowKeys: selectedIdsInSearchTab,这个是保存选中行id的一个数组,必须加,数组有内容后,页面就会显示出哪行被选中的样式

2.onRowthis.selectRow(record)方法

selectRow = (record) => {const {dispatch,TrainPlanManage_SelectBscUserT: { selectedIdsInSearchTab,selectedRowsInSearchTab },isRadio} = this.props;//如果是单选if(isRadio){//获取存放的keyconst selectedRowKeys = [record.id];//获取存放的数据valueconst selectedRows = [record];dispatch({type: 'TrainPlanManage_SelectBscUserT/updateSelectedIdsInSearchTab',selectedIds : selectedRowKeys,selectedRows: selectedRows,});}//否则是多选else{//获取存放的keyconst selectedRowKeys = [...selectedIdsInSearchTab];//获取存放的数据valueconst selectedRows = [...selectedRowsInSearchTab];  if (selectedRowKeys.indexOf(record.id) >= 0) {//当点击选中的数据,取消选中selectedRowKeys.splice(selectedRowKeys.indexOf(record.id), 1);//取消选中也要删除数组中的valueselectedRows.forEach((element,index) => {if(element.id === record.id){//根据id获取到数组里当前数据的下标,并删除。selectedRows.splice(index,1)}});} else {selectedRowKeys.push(record.id);//将选中的数据加入数组里selectedRows.push(record)}//this.setState({ selectedRowKeys,selectedRows });    dispatch({type: 'TrainPlanManage_SelectBscUserT/updateSelectedIdsInSearchTab',selectedIds : selectedRowKeys,selectedRows: selectedRows,});}}

说明:

(1)TrainPlanManage_SelectBscUserT: { selectedIdsInSearchTab,selectedRowsInSearchTab }的意思是,从TrainPlanManage_SelectBscUserT.js里拿出2个变量来,selectedIdsInSearchTab是保存被选中id的数组,selectedRowsInSearchTab 是保存被选中整行数据的数组

(2)入参record,就是当前点击的行数据,单选时直接保存回那2个变量中即可;
多选时,先判断现有数组中是否存在当前点击行的id,如果存在,那就是取消选择的意思,从数组移除内容;
如果不存在,那就是新增,直接放入数组。

(3)selectedRows.splice(index,1)的意思是,从数组中删除下标为index的数据。

(4)dispatch方法,调用的是TrainPlanManage_SelectBscUserT.js里的方法,把处理好的数组保存进去用,如下:

export default {namespace: 'TrainPlanManage_SelectBscUserT',state: {selectedIdsInSearchTab:[],selectedRowsInSearchTab:[],......---------------------------------------reducers: {updateSelectedIdsInSearchTab(state, action) {return {...state,selectedIdsInSearchTab: action.selectedIds || state.selectedIds,selectedRowsInSearchTab: action.selectedRows || state.selectedRows,};},}    

(5)如果变量在同一个js中,也可以使用//this.setState({ selectedRowKeys,selectedRows }); 来保存。

//3.//onChange: this.onSelectChange方法

这个方法是点击左边的 单选/复选 按钮 触发的;

单选没有问题;

但是多选的上方提到了,由于框架自身bug,翻页多选数据的话,id数组没有问题、内容数组会只保留当前页、无法保留前几页选中的内容,所以不推荐使用,注释了(后果是点击左边的单选/多选按钮没有反应,只能点击行右边部分进行选择/取消选择,也许也能接受?)

代码如下:

  // 复选框选中后的方法onSelectChange = (selectedIds, selectedRows) => {const { dispatch } = this.props;dispatch({type: 'TrainPlanManage_SelectBscUserT/updateSelectedIdsInSearchTab',selectedIds,selectedRows,});};

说明:
(1) 这个方法入参是选中行的id数组和选中行的数据数组(再强调一次,翻页多选的话,选中行的数据数组只有当前页的,有问题)

(2)dispatch方法与上方相同,就是把数组直接保存进去。

三、备注

1.发现,table绑定的已选中的id数组(selectedRowKeys),如果列表有id的话,把id装入数组,页面就会显示哪些行被选中;
但是如果数据列表没有叫id的字段,那么把其它值装入绑定数组没有效果,页面不知道选中的是哪行;

可能是框架会有默认的id,装入默认的id才行(比如0,1,2),但是数据列表没有id字段,我们无法区分这条数据应该的id是什么,从而无法实现点击一行选中当前数据的功能……

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

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

相关文章

JVM面试题:(三)GC和垃圾回收算法

GC: 垃圾回收算法&#xff1a; GC最基础的算法有三种&#xff1a; 标记 -清除算法、复制算法、标记-压缩算法&#xff0c;我们常用的垃圾回收器一般 都采用分代收集算法。 标记 -清除算法&#xff0c;“标记-清除”&#xff08;Mark-Sweep&#xff09;算法&#xff0c;如它的…

canvas基础2 -- 形状

七巧板 七巧板本质上就是 分别由几个直线 拼成一个个图形&#xff0c;再将这些图形结合起来 var tangram [{ p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#caff67" },{ p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], col…

Maven下载与文件配置

文章目录 官网下载相应文件修改配置文件设置环境变量 官网下载相应文件 https://maven.apache.org/ 点击Download ,找到Files 下载好了&#xff0c;请解压&#xff0c;放在你需要存储的位置&#xff01; 修改配置文件 打开解压的文件&#xff1a; 在conf 下有一个setting…

vscode远程ssh服务器且更改服务器别名

目录 1、打开VS Code并确保已安装"Remote - SSH"扩展。如果尚未安装&#xff0c;请在扩展市场中搜索并安装它。 2、单击左下角的"Remote Explorer"图标&#xff0c;打开远程资源管理器。 3、在远程资源管理器中&#xff0c;单击右上角的齿轮图标&#x…

基于VCO的OTA稳定性分析的零交叉时差模型研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

因子分析(SPSS和Python)

一、源数据 二、SPSS因子分析 2.1.导入数据 2.2.标准化处理 由于指标的量纲不同&#xff08;单位不一致&#xff09;&#xff0c;因此&#xff0c;需要对数据进行标准化处理 2.3.因子分析 点击“确定”后&#xff0c;再回到“总方差解释”表格&#xff0c;以“旋转载荷平方和…

点向行列连边的网络流图优化成行列连边的二分图:CF1592F2

https://www.luogu.com.cn/problem/CF1592F2 做完F1&#xff0c;然后用1的结论来思考。 场上推了几个性质。首先op4的操作行列必然两两不同&#xff0c;所以op4最多 max ⁡ ( n , m ) \max(n,m) max(n,m) 次。然后手玩发现只有除 ( n , m ) (n,m) (n,m) 的三个格子都为1&am…

发稿渠道和发布新闻的步骤和技巧,收藏!

在现代社会中&#xff0c;新闻的发布和传播起着至关重要的作用。通过新闻&#xff0c;人们可以获取及时的信息&#xff0c;了解社会动态和事件发展。而对于企业和组织来说&#xff0c;通过新闻发布可以宣传品牌、推广产品&#xff0c;增加曝光度&#xff0c;吸引目标受众的关注…

安卓-APP启动优化技术方案汇总

应用有三种启动状态&#xff1a;冷启动、温启动或热启动。每种状态都会影响应用向用户显示所需的时间。在冷启动中&#xff0c;应用从头开始启动。在另外两种状态中&#xff0c;系统需要将后台运行的应用带入前台。 我们建议您始终在假定冷启动的基础上进行优化。这样做也可以…

分享一下微信付费文章功能怎么做

微信付费文章功能是一种基于微信公众号的文章付费阅读模式&#xff0c;它可以帮助公众号运营者实现文章内容的变现&#xff0c;提高文章的阅读量和收益。本文将介绍微信付费文章功能的制作流程、功能特点、使用流程和推广策略&#xff0c;帮助读者了解如何制作一个高效的微信付…

Postman历史版本下载

1. 下载对应版本的postman 历史版本下载 请把下面链接的"版本号"替换为指定的版本号&#xff0c;例如&#xff1a;8.8.0 Windows64位 ​https://dl.pstmn.io/download/version/版本号/win64​ Windows32位 https://dl.pstmn.io/download/version/版本号…

基于图像的照明(IBL)简明教程

基于图像的照明基本上将图像中的所有像素视为光源。 通常&#xff0c;从全景高动态范围 (HDR) 图像创建的环境贴图&#xff08;通常是立方体贴图&#xff09;将用作纹理获取的源。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 假设阴影物体是不透明的&#xff0c;我们…

JVM(一)

字节码文件的组成: 基础信息:魔数&#xff0c;字节码文件对应的java版本号&#xff0c;访问表示public final以及父类和接口 常量池:保存了字符串常量&#xff0c;类或者是接口名&#xff0c;字段名&#xff0c;主要在接口中使用 字段:当前类或者是接口声明的字段信息 方法:当…

Spring之IoC

Spring的设计理念和整体架构 一句话概括就是&#xff1a;Spring是一个轻量级的、非侵入式的控制反转(IOC)和面向切面(AOP)的框架。 设计理念&#xff1a; 松散耦合&#xff1a; Spring鼓励开发者编写松散耦合的代码&#xff0c;通过依赖注入和接口抽象等方式来减少组件之间的…

DV SSL证书

随着网站越来越多&#xff0c;数据安全显得尤为重要。保护网站安全的数字证书应运而生&#xff0c;各大品牌的SSL证书可以实现网站http到https的转变&#xff0c;加密传输过程&#xff0c;提升品牌形象&#xff0c;优化SEO等优点。SSL证书按照验证等级分为DV&#xff0c;OV&…

意大利航天飞行器公司【Sidereus】完成510万欧元融资

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;位于意大利萨莱诺的航天飞行器公司Sidereus Space Dynamics今日宣布已完成510万欧元融资。 本轮融资由Primo Space和CDP Venture Capital Sgr领投&#xff0c;通过Italia Venture II - Fondo Impr…

win10 wsl安装步骤

参考&#xff1a; 安装 WSL | Microsoft Learn 一、安装wsl 1.若要查看可通过在线商店下载的可用 Linux 发行版列表&#xff0c;请输入&#xff1a; wsl --list --online 或 wsl -l -o> wsl -l -o 以下是可安装的有效分发的列表。 使用 wsl.exe --install <Distro>…

python结合excel数据轻松实现接口自动化测试

在刚刚进入测试行业的时候&#xff0c;最开始也是做功能测试&#xff0c;我想很多伙伴和我一样&#xff0c;觉得自动化测试都很高端&#xff0c;很神秘。迫不及待的想去学习作自动化测试。 以前比较常用数据库python做自动化&#xff0c;后面发现excel个人觉得更加适合&#x…

Vue开发中Jwt的使用

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Vue》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#xff0c;这个专栏…

缓存的力量:提升API性能和可扩展性

缓存是将频繁访问的数据或资源存储在临时存储位置(例如内存或磁盘)的过程&#xff0c;以提高检索速度并减少重复处理的需要。 缓存的好处 提高性能&#xff1a;缓存消除了每次从原始源检索数据的需要&#xff0c;从而提高了响应时间并减少了延迟。减少服务器负载&#xff1a;通…