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等等

 

Antd Design Pro Components ProTable批量操作获取当前选中的key
ayun1996的博客
12-22 4934
Antd Design Pro Components ProTable批量操作获取当前选中的key
vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据
agua001的博客
04-22 8390
vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据
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 来控制选...
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 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={...
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 3475
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上面有复选框但是不符合我的业务需求，所以自己做了一下改变 第一步：去掉首行的复选框...
【React+antd】antd 4.X Table组件中复选框选中某一行单表现为全选现象
all_might1的博客
12-30 2603
目录 一、问题产生背景 二、问题解决思路 三、解决方案 一、问题产生背景 升级antd从3.x到4.x，重构页面。有些代码在3.x可以正常跑，但在4.x就会有形形色色、奇奇怪怪的问题。 这次就是关于Table组件复选的问题。表现为，选择其中一行内容，却一下子全选了当页所有的数据，有时又会突变成选不中。如下图 二、问题解决思路 从表现看不出来有什么问题，于是先打印了下 rowSelection 的 selectedRo...
Ant-Design-Pro-Components： ProTable组件 实现跨页多选。
~~~
04-26 2563
Ant-Design-Pro-Components： ProTable组件 实现跨页多选。
typecript antd protable 组件嵌套表格
11-28
TypeScript、Ant Design（简称AntD）和ProTable是一组常用于前端开发的强大工具。AntD是一个流行的UI组件库，提供了一套丰富的React组件，而ProTable是基于AntD的一个表格组件，它扩展了基础表格的功能，使其更适用于复杂数据展示。 当你想要在TypeScript项目中嵌套使用AntD的ProTable组件时，首先需要安装`antd ProTable`依赖： ```bash npm install @ant-design/pro-table @types/react-pro-table ``` 然后，你可以创建一个嵌套表格的例子，比如有一个数据结构包含层级关系的数据，你可以这样做： ```typescript import { Table, Column } from '@ant-design/pro-table'; interface NestedData { id: string; name: string; children?: NestedData[]; } const columns: ProColumns<NestedData>[] = [ { title: 'Name', dataIndex: 'name', render: (text) => <a href="javascript:;">{text}</a>, }, { title: 'Children', dataIndex: 'children', render: (children: NestedData[]) => ( <Table columns={columns} data={children} bordered /> ), // 使用自定义渲染处理嵌套表格 customRender: 'children', }, ]; function NestableTable({ data }: { data: NestedData[] }) { return ( <Table columns={columns} data={data} pagination={{ pageSize: 5 }} /> ); } // 示例数据 const nestedData: NestedData[] = [ { id: '1', name: 'Parent 1', children: [ { id: '1-1', name: 'Child 1', }, { id: '1-2', name: 'Child 2', children: [{ id: '1-2-1', name: 'Grandchild 1' }], }, ], }, // 更多数据... ]; ReactDOM.render(<NestableTable data={nestedData} />, mountNode); ``` 在这个例子中，`customRender`属性用于指定如何处理`children`列，使得每一行会显示一个嵌套的表格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值