Antd Table Pro框架Protable组件中rowSelection方法的一个坑

最新推荐文章于 2025-04-01 11:33:36 发布
原创 最新推荐文章于 2025-04-01 11:33:36 发布 · 981 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

文章描述了一个在使用Protable组件时遇到的问题，即全选操作失效，提示只选择了1个。解决方案是修改rowKey的值，将其设置为接口返回数据中的唯一标识，如gnlkid，确保每一行都有独特的识别符。这种方法适用于需要基于数据唯一性的场景。

首先上截图看我遇到的问题跟你是否一样，全选了，还是提示就选了1个。。。。。

 解决办法：

就一个点，非常坑，在你的protable组件里有个方法rowKey的值改为：{record => record.gnlkid}

注意gnlkid是你接口返回值中代表该行数据的唯一值，比如有些是id等等

 

react关于点击一个复选框全部选中的解决方法
A12536365214的博客
06-16 2238
基于目前以上代码已经可以首先表格的渲染了，但是我们现在点击复选框还是会全部选中，因为他缺少一个参数，给他的组件加上rowKey：idxiamian。关于点击一个复选框全部选中的解决方法，这里我采用的是ant Design组件演示的。这是一组假数据，假设是我们从接口后台请求到的数据。关于react怎么创建可以看往篇文章。点击前：看不出丝毫问题。
Antd Table带有分页的全选功能
zm_miner的博客
08-04 2026
这种带有分页的全选 如果我们翻页也需要记录跨页的勾选数据 antd自带的onChange事件只能记录选中RowKey值 但是勾选的数据只会是当前页的条数 此时就需要我们结合onSelect和onSelectAll来完成数据的交互。// 存储所有页面选择的数据，比如第一页两个，第二页两个，都存到这个数组中。allSelectedRows就是所有页你勾选的数据的数组。
如果你在使用 Ant Design Pro ProTable，并且希望不勾选子节点的数据
weixin_44217769的博客
09-01 699
如果你在使用 Ant Design Pro ProTable，并且希望不勾选子节点的数据，请使用。请根据你的实际需求修改上述代码，并确保按照你的场景进行适当的错误处理和数据处理。来自定义表头的选择框。，以确保不勾选子节点的数据。属性实现对已选择行的管理和处理。在上述代码中，我们通过设置。属性来自定义选择行为。首先，确保你已经安装了。
antd protable实现表格单选
前端劝退工程师
10-12 3863
protable的rowSelection属性开启后可以对table进行批量操作 改造为单选 关键代码 rowSelection={{ onChange:(ls)=>{ if(ls.length>1){ ls.shift() } } }} 去掉多选框 className={{style.table}} . . . .table{ thead tr
Ant-Design-Pro中Table组件rowSelection方法的一些坑
热门推荐
永不消失的彩虹的博客
09-06 4万+
<Table rowSelection={rowSelection} columns={columns} dataSource={data} /> 在 <Table/> 组件中有 rowSelection={rowSelection} 方法，可以让Table的第一列成为联动的选择框。 API中说到通过 rowSelection.selectedRowKeys 来控制选...
vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据
agua001的博客
04-22 8390
vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据
精选资源
在antd Table中插入可编辑的单元格实例
01-21
看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是...
antdPro - ProTable 实现两个选择框联动效果
名人卷耶
06-08 4298
antdPro实现选择框联动效果
精选资源
Antd的table组件表格的序号自增操作
01-18
2，实现方法 const columns = [ { title: '序号', render:(text,record,index)=>`${index+1}`, }, { title:'操作', dataIndex:'delete', key:'delete', render: (text,record) => ( <Link to={{ ...
精选资源
antd中table展开行默认展示,且不需要前边的加号操作
01-22
在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={...
Element-ui中 表格（Table）组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
明天也要努力的博客
10-12 6975
问题： Element-ui中，表格（Table）的 toggleRowSelection 方法无法默认选中的情况。 需求：对将设置为选中的内容进行部分修改，如：默认选中的内容必须得通过接口或者其他方式来获取，然后再默认选中。 官方代码： <template> <div class="wrap"> <el-table border ref="multipleTable" :data="tableData" toolt
ant-design-vue-pro的table动态列的显示和隐藏
weixin_44254243的博客
01-22 7728
1 . 需求： 用户可以动态的选择行和列。 上图（已经实现了的效果）： 图1： 图2： 2 . 基本思路： 大家知道行的选择可以说非常简单，但是列的选择，ant-design-vue中没有集成很好的组件，但是ant-design-proTable中集成了这种组件：https://procomponents.ant.design/components/table/ 有兴趣可以看看。 我的大致思路：是把columns动态渲染到表格上单，用户触发checkbox相应的watch会监听到，修改columns中
Antd Design Pro Components ProTable批量操作获取当前选中的key
ayun1996的博客
12-22 4934
Antd Design Pro Components ProTable批量操作获取当前选中的key
antd design pro搭建了项目用到了ProTable组件onRow
m0_74878817的博客
11-24 843
项目中用到了rowSelection进行单选，但是点击范围太小了，又没有看到onRow的方法，想着antd里面的table有onRow方法就用了一下，结果发现虽然可以获取到数据，但是选中的哪一行却不高亮，各种搜索没有找到解决问题的办法。最后设置了下selectedRowKeys，然后解决了高亮问题。ProTable功能很强大。
记录ant-design-vue列表的rowSelection动态隐藏的一个骚操作
12-26 5111
有一个列表页，我希望的效果是电脑浏览器中打开，是带有选择框的；而在钉钉中打开只用于查看（由于宽度限制需要隐藏checkbox） 显示checkbox的配置项 :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" 达到效果 不显示checkbox，删除:rowSelection这一个配置项 达到效果 电脑端显示，钉钉端（手机端）不显示，开始踩坑： 1、参考columns配置参数，失败 //...
关于ProTable的 rowkey 不唯一的处理
yiguoxiaohai的博客
05-07 2078
解决： 在 protable 中加入下面，使其每列唯一即可 rowKey={(record: any, index: number) => `${record?.id ?? ''}${index.toString()}`}
ant design Pro组件的使用---ProTable的核心和进阶使用
最新发布
2303_81135627的博客
04-01 3474
ProTable 是 Ant Design Pro 提供的一个高级表格组件，它基于 Ant Design 的 Table 组件进行了扩展和封装。ProTable 提供了更多便捷功能，如数据请求、列配置、批量操作、搜索表单等，使得在 React 应用中创建和管理复杂表格变得更加简单和高效。它特别适合用于企业级后台管理系统的数据展示和操作。
antd Protable 常用配置项包括多选、查询条件等复合在protable组件中，部分配置项与table组件通用（如批量操作、复选框勾选后翻页缓存）
jp2021的博客
10-26 3134
antd Protable 常用配置项包括多选、查询条件等复合在protable组件中，部分api通用于table组件如批量操作复选框勾选后翻页缓存
rowSelection实现复选框的单选功能
weixin_44466630的博客
09-11 3027
rowSelection实现复选框的单选功能rowSelection实现复选框的单选功能第一步：去掉首行的复选框按钮第二步：设置复选框的单选功能 rowSelection实现复选框的单选功能 由于工作上的要求，现在需要使用复选框的样式，但是功能是只能单选的，所以表格的头部要去掉全选全不选的按钮，ant design上面有复选框但是不符合我的业务需求，所以自己做了一下改变 第一步：去掉首行的复选框...
typecript antd protable 组件嵌套表格
11-28
AntD是一个流行的UI组件库，提供了一套丰富的React组件，而ProTable是基于AntD的一个表格组件，它扩展了基础表格的功能，使其更适用于复杂数据展示。 当你想要在TypeScript项目中嵌套使用AntD的ProTable组件时，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值