antd表格切换分页页码时之前的选择项仍然保留问题解决

最新推荐文章于 2024-05-10 16:42:29 发布
最新推荐文章于 2024-05-10 16:42:29 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： react 文章标签： antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lingliu0824/article/details/119483871
版权
在使用Ant Design Table组件时遇到一个问题，即切换分页后，选中状态并未清除，显示异常。经过排查发现，原因是数据缺少唯一的`key`字段。解决方法是确保每条数据都有一个独特的`key`属性，以使Table能够正确跟踪选中状态。实现在分页切换后，选中状态能正确反映当前页面的数据。
摘要由CSDN通过智能技术生成

问题：使用antd table的分页和选择功能时，切换了分页，选中状态仍然保留
在这里插入图片描述
在第一页选中前三条数据
在这里插入图片描述切换到第二页后前三条也被选中，但打印selectedRowKeys为[0,1,2]选中的只有3条数据
解决：为每条数据加上key字段（如果本来就存在key字段且值唯一，则无需再单独添加）：

在这里插入图片描述

小玲子小玲子
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
antd日期选择器禁止选择当天之前的时间操作
01-22
使用disabledDate属性（不可选择的日期） 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current && current <moment().subtract(1, days); //当天之前的不可选，不...
antd table分页,关于react的antd表格分页的问题
weixin_30635315的博客
03-12 3013
最近用react的框架做了一个表格比较多的数据库，里面涉及到了以一些分页的问题，目前我还是一个前端的小白。通过自己看文档何请教一位大神才解决了这个问题，现在在这里记录一下自己的心得。自己写的应该是比较笨的方法，欢迎大神来指证一些简单的方法和错误。 下面是表格分页的代码。rowKey="id"rowSelection={rowSelection}columns={character}dataSour...
antd Table表格分页数据为动态获取时，切换页码后保留之前页面选中数据状态的实现，以及数据刷新后选中状态仍保留问题的解决
lingliu0824的博客
09-08 6123
问题： antd Table提供了数据行可选择的操作，但是如果分页数据是从后端获取，切换页码后之前的分页数据就没有了，回到之前的页面选中状态也无法保留。 解决： 这里对ant Table表格组件进行了封装，实现了在分页数据动态获取时切换页码其他页选中的数据和状态仍保留的功能 思路： 1.定义curPageSelectedRowKeys存储当前页选中数据的key值数组，selectedRows存储所有选中数据 2.监听当前页数据选中/取消选中和全选/取消全选操作，更新curPageSelectedRowKey
vue3 antd-vue 超简单方式实现a-table跨页勾选以及解决全选异常的问题
最新发布
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
05-10 1477
回显，如比返回第一页的时候触发分页改变， 在映射中的第一页的数据给到a-table绑定的state.selectedRowKeys即可，如下方法。绑定勾选keys数组是 state.selectedRowKeys， 勾选触发的方法 onSelectChange。第一页勾选了2， 3， 4。翻到第三页勾选24， 25。
解决vue antd tab切换多次切换不刷新的问题
weixin_43994675的博客
06-14 2292
解决vue antd tab切换多次切换不刷新的问题
antd Table组件selectedRows翻页未保留上一页已选中数据（方法二）
xiasohuai的博客
12-14 1225
antd Table组件selectedRows翻页未保留上一页已选中数据
antd 表格列宽自适应方法以及错误处理操作
01-18
当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量 也就是没有设置宽度的列会平分表格中余下的宽度 在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, ...
vue3.0-vite-antd 实现动态切换主题.zip
10-29
在Vue3.0框架中，配合Vite构建工具和Ant Design Vue 2.0库，实现动态主题切换是一项常见的需求，特别是在开发具有高度定制化界面的Web应用时。本项目"vue3.0-vite-antd 实现动态切换主题.zip"提供了一种实现方式，...
解决Antd 里面的select 选择框联动触发的问题
01-22
但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被清空。 解决办法： 使用Select 里面的value属性，来进行清空 <Form style={{...
vue表格分页勾选状态保留
weixin_47426048的博客
01-07 814
/** 解决当前页面搜索后依然保持表格多选状态 * currentPageData 当前页所有数据 * currentPageSelected 当前页已选数据 * currentPageNotSelected 当前页未选数据 * */ resolveAllSelection() { const currentPageData = (this.$refs.tableReff.getTableDat..
解决antd vue的 Table组件selectedRows翻页后不保留上一页已选中数据
weixin_44090753的博客
07-01 1779
解决antd vue的 Table组件selectedRows翻页后不保留上一页已选中数据
antd请求翻页时记住勾选的数据，将数据保存在selectedRows中回显，不受分页影响
weixin_47602884的博客
05-17 1120
在使用antd的rowSelection多选配置时，每次翻页后，勾选的selectedRows只会显示当前页的，其他页面的数据就会丢失。
Ant Design of Vue表格（带分页/多选）
Xiang_Gong_Ya_的博客
05-07 1176
<a-table :rowKey="(record, index) => index" :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="{ pageSize: 10, total: tot...
AntD Table组件selectedRows翻页后保留上一页已选中items项（最新）
Weston_J的博客
06-17 6537
AntD Table组件selectedRows翻页后保留上一页已选中items项问题描述主要API解决思路具体解决方法注意事项 问题描述 用户在翻页后丢失已选中的数据，只能在已分页的数据中进行修改操作，尤其是在填写分步表单时，上一步及下一步也会丢失数据 主要API Ant Design ： onSelect： 用户手动选择/取消选择某行的回调 onSelectAll： 用户手动选择/取消选择所有行的回调 不使用 onSelectChange，原因为：当指定selectedRowKeys(需要被选中的
react+antd+Table实现表格初始化勾选某条数据，分页切换保留上一页勾选的数据
outstanding木槿
10-17 739
【代码】react+antd+Table实现表格初始化勾选某条数据，分页切换保留上一页勾选的数据。
antd vue修改分页_ant.design中，数据改变时，怎么让分页重置到第一页？
weixin_39883906的博客
12-19 2426
问题描述RT:最近在使用antd的时候，页面中有一个表格，下面是自带的分页，当点击一个按钮的时候，表格的数据更新，但是分页的按钮并不会回到第一页，还停留在之前的位置如下图：点击按钮，数据更新，这个页码应该重置到1页。相同的问题还有输入框中的数据，也不会重置。补充：点击按钮后，使用的是react-router v4 url是会改变的。有什么好的办法的？感谢。补充-------------------...
element框架table多选分页时保留原有选中项（vue2和vue3均适用）
weixin_54553882的博客
07-04 1089
【代码】element框架table多选分页时保留原有选中项（vue2和vue3均适用）
Ant Design Vue - table实现跨页选择
Youaremysalvatio的博客
06-26 1087
/ this.selectionRows = selectionRows //不用onchange操作。
antd table表格 选中项 切换分页保留之前的选中项
05-18
如果你使用的是 antd 的 Table 组件，可以通过以下步骤来实现在分页切换时保留之前的选中项： 1. 在 Table 组件中，设置 rowSelection 属性，该属性用于控制行选择功能。 2. 在 rowSelection 中，设置 selectedRowKeys 属性，该属性用于存储当前选中的行的 key 值。 3. 在 onChange 回调函数中，通过参数 pagination 获取当前的分页信息，并将 selectedRowKeys 存储到 state 中。 4. 在 render 中，通过 state 中的 selectedRowKeys 属性，将之前选中的行重新选中。 下面是一个示例代码： ``` class MyTable extends React.Component { state = { selectedRowKeys: [], // 存储当前选中的行的 key 值 }; onSelectChange = selectedRowKeys => { // 更新选中的行 this.setState({ selectedRowKeys }); }; render() { const { selectedRowKeys } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, }; const dataSource = [ { key: '1', name: 'Mike' }, { key: '2', name: 'John' }, { key: '3', name: 'Lucy' }, { key: '4', name: 'Tom' }, ]; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, ]; return ( <Table rowSelection={rowSelection} dataSource={dataSource} columns={columns} pagination={{ pageSize: 2, onChange: (page, pageSize) => { // 获取当前分页的选中行 const { selectedRowKeys } = this.state; // 更新分页信息 this.setState({ selectedRowKeys: [], }); }, }} /> ); } } ``` 在上面的代码中，我们定义了一个 Table 组件，该组件包含一个 rowSelection 属性，用于控制行选择功能。在 onChange 回调函数中，我们获取当前的分页信息，并将之前选中的行存储到 state 中。在 render 中，我们通过 state 中的 selectedRowKeys 属性，将之前选中的行重新选中。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值