antd rowSelection 第二页多选的时候选择的是第一页的数据

最新推荐文章于 2024-06-30 12:04:30 发布
最新推荐文章于 2024-06-30 12:04:30 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/water_Popcorn/article/details/102702203
版权

 问题：选择的第二页数据id是1308,1339.但是控制台上显示选中id是1,2

         

解决方法：

给table加上 rowKey={record => record.id}

<Table rowSelection={rowSelection} rowKey={record => record.id} columns={columns} dataSource={data} />

water_Popcorn
关注
专栏目录
antd rowSelection多选框翻页清空前一页选中的问题
weixin_43963525的博客
02-25 1786
//设id为key rowKey={record => record.id} //复选框选中操作 rowSelection={{ //当使用 rowSelection 时，请设置 rowSelection.preserveSelectedRowKeys 属性以保留 key preserveSelectedRowKeys:true, ...
antd 表格的多选/单选框：rowSelection
汤迷的博客
02-26 7874
获取选中的框{ 1、定义在rowSelection中,然后监听onChange事件，给selectedRowKeys赋值 rowSelection:{type:'radio',onChange: this.selectChange,getCheckboxProps:this.getCheckboxProps,selectedRowKeys:[]} selectChange (...
关于vue+element-ui项目的分页，返回默认显示第一页的问题解决
七色花
10-22 1847
原文链接：https://blog.csdn.net/StephenO_o/article/details/84234916 <div class="pagePagination"> <el-pagination @current-change="handleCurrentChange" :page-size="listPageEvery" layout="prev, pager, next"
antd rowSelection 分页等切换保留勾选
曲鸟
05-14 2713
antd rowSelection 分页等切换保留勾选 看了网上很多实现，感觉都挺复杂的，所以写下我10行左右代码的实现方案： 思路也很简单，就是让选中项与state绑定，在全选\勾选的时候改变state.select_data的值就行了，下面是代码：如果需要用hooks实现也是同理 this.state={select_data:[]}//初始化选中项为空 const rowSelection = {//antd组件 //选中项与state.select_data绑定 selectedR
element-ui table组件时,勾选第一页某条数据,翻页后再跳转第一页,回显勾选,实现跨页联动
最新发布
a123456234的博客
06-30 261
el-table 标签里面设置 :row-key=“getRowKeys” getRowKeys 函数返回 row 里面的唯一标识字段。el-table-column 标签里面 设置 :reserve-selection=“true”
vue+ant 分页器页码与表格数据不匹配
boboshigecainiao的博客
08-26 1274
先看问题： 可以看到，在第二页点击搜索的时候，页面数据已经为第一页的数据，但是分页器的页码依然停留在第二页（2）。（至于为什么会出现这个问题，目前还没有找到原因，（我是菜鸟）） 然后来看解决思路： 1.表格双向绑定属性 current （默认值为1）。 2.然在点击跳转第二页，触发change事件的时候（e.current的值此时为2 ），然后把这个值赋给表格属性current（此时为2）。 3.在拉取列表第二页的时候，把表格属性current （此时为2）的...
vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据
agua001的博客
04-22 7862
vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据
Ant Design of Vue table 可以选择多页数据并提交，当返回上一页就看不到自己所选的数据
qq_38709227的博客
12-25 2026
1.由于table分页效果，当选择第二页前一页选中的就被替换了 <a-table size="middle" :columns="columns" :dataSource="treeList" :loading="loading" :pagination="pagination" :rowKey="(record) => record.id" :row-selection="{ s..
Ant Design Vue1.7.8中table多选，table选择后进行操作，table可控的筛选，完成后清空选择，通过 rowSelection.selectedRowKeys 来控制选中项。
qq_39695210的博客
01-06 2503
Ant Design Vue1.7.8中table多选，table选择后进行操作，table可控的筛选，完成后清空选择，通过 rowSelection.selectedRowKeys 来控制选中项。
【React+antd】antd 4.X Table组件中复选框选中某一行单表现为全选现象
all_might1的博客
12-30 2327
目录 一、问题产生背景 二、问题解决思路 三、解决方案 一、问题产生背景 升级antd从3.x到4.x，重构页面。有些代码在3.x可以正常跑，但在4.x就会有形形色色、奇奇怪怪的问题。 这次就是关于Table组件复选的问题。表现为，选择其中一行内容，却一下子全选了当页所有的数据，有时又会突变成选不中。如下图 二、问题解决思路 从表现看不出来有什么问题，于是先打印了下 rowSelection 的 selectedRo...
react中使用antd中的 Table 组件（数据展示，分页，设置可选项）
g2255yuuhgy的博客
07-23 8532
React是由Facebook开发的一种用于构建用户界面的JavaScript库，它提供了一种声明式的编程模型，使得构建复杂的UI变得更加简单和高效。React的组件化开发模式使得代码可维护性更强，而Antd的可重用组件则减少了开发者的重复劳动，同时保证了应用的一致性和用户体验。在使用表格时不知大家有没有被里面各种各样的功能所困扰，本来你只需要使用其中一个功能，但官网的查看代码总是多个功能重合在一次展示，不利于大家去学习，面对初学者很不友好，这也是我写这篇的目的，我将里面常用的功能分离拿出来介绍。
avue表格多选，分页时候保留上一页的勾选状态实现
m_uncle的博客
07-23 3135
需要的操作如下: 1、文档上说设置reserveSelection:true, 2、如果列表中的数据有返回id,并且是唯一值,那么就不需要处理,如果获取的数据没有返回id,那么有两种方法去实现: 2-1、循环获取到的数据,给每条数据自己添加一个id,并且要保证是唯一值. 2-2、使用rowKey来设置一个唯一值,比如说: 获取的数据中能明确的知道projectId是唯一值, 那么可以在option中设置rowKey: 'pr...
element表格选中项回显
a5252145的博客
10-23 2966
element表格选中项回显 需要利用<el-table>下的row-key属性以及<el-table-column>标签下的:reserve-selection属性。 <el-table ref="tableData" class="tableData" :data="tableData.slice((currentPage-1)...
使用Ant Design Vue的Table组件，解决点击任意内容详情，点击返回分页器页数默认回到第一页的问题
潮汐未见潮落的博客
08-09 2658
使用Ant Design Vue的Table组件，解决点击任意内容详情，点击返回分页器页数默认回到第一页的问题
Ant-Design-Pro中Table组件rowSelection方法的一些坑
热门推荐
永不消失的彩虹的博客
09-06 4万+
<Table rowSelection={rowSelection} columns={columns} dataSource={data} /> 在 <Table/> 组件中有 rowSelection={rowSelection} 方法，可以让Table的第一列成为联动的选择框。 API中说到通过 rowSelection.selectedRowKeys 来控制选...
antd table rowSelection多选框(可选择列表)
MYG_G
11-11 2万+
可选择列表 如上图，是antd的可选择列表，我们如何将普通列表变成可选择列表呢，这就用到了一个很重要的属性rowSelection。 rowSelection 如下图，rowSelection属性是一个对象，他有很多的参数。 下面是antd官网截图，关于rowSelection的功能配置。 指定可选择列的属性作为key 注意：其中有个很重要的点,就是selectedRowKeys默认取得是列表的第一项，如果你想指定key,就要在table增加rowKey={record => record.id}
Antd-table全选踩坑记录
qq_45799465的博客
02-09 3246
andt-table 中选中第一项会影响到后面的每一页的第一项的解决方法，以及全选如何选中所有数据而不是当前数据。
针对antd的多级多选框Checkbox只有第一个勾选有效的问题原因之一
Hi-Sun的博客
09-27 1248
如下图所示的一层嵌套一层的多选框，需要在Checkbox外包裹一层Checkbox.Group，否则每次点击选中，尽管checked属性已经变为了true，但是页面上只对第一次点击勾选的选项有效，后面点击的均无效，即都没有勾选上 ...
antd表格切换分页页码时之前的选择项仍然保留问题解决
lingliu0824的博客
08-07 2693
问题：使用antd table的分页和选择功能时，切换了分页，选中状态仍然保留 在第一页选中前三条数据 切换到第二页后前三条也被选中，但打印selectedRowKeys为[0,1,2]选中的只有3条数据 解决：为每条数据加上key字段（如果本来就存在key字段且值唯一，则无需再单独添加）： ...
使用antd table组件，分页获取数据，实现跨页多选
05-26
使用antd table组件进行分页获取数据，需要在表格中设置pagination属性，同时需要在后端接口中实现分页查询功能。 对于跨页多选，antd table提供了rowSelection属性，可以通过设置type为checkbox实现多选，但是默认只能在当前页进行选择，无法跨页选择。 要实现跨页多选，需要自定义rowSelection的selectedRowKeys和onChange方法。具体步骤如下： 1. 在state中定义selectedRowKeys数组，用于保存已选中的行的key值。 2. 在rowSelection属性中设置selectedRowKeys为state中定义的selectedRowKeys数组。 3. 在rowSelection属性中定义onChange方法，用于处理选中行的变化。在该方法中，需要使用setState更新state中的selectedRowKeys数组。 4. 在表格的pagination属性中设置onChange方法，用于处理页码变化时清空已选中的行。 以下是示例代码： ``` import React, { Component } from 'react'; import { Table } from 'antd'; class MyTable extends Component { state = { selectedRowKeys: [], // 保存已选中的行的key值 }; onSelectChange = selectedRowKeys => { // 更新state中的selectedRowKeys数组 this.setState({ selectedRowKeys }); }; onPaginationChange = () => { // 清空已选中的行 this.setState({ selectedRowKeys: [] }); }; render() { const { selectedRowKeys } = this.state; const rowSelection = { type: 'checkbox', selectedRowKeys, onChange: this.onSelectChange, }; return ( <Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={{ onChange: this.onPaginationChange }} /> ); } } ``` 注意，以上代码仅为示例，具体实现需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值