自定义AntD Table rowSelection 的 onChange 参数 selectedRowKeys 的取值

本文介绍如何在使用表格组件时,通过定义rowKey为id属性,实现在rowSelection onChange事件中获取当前行的完整数据,而非仅是行索引,适用于动态获取表格行信息的应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在没有任何设置的情况下,rowSelectiononChange 事件第一个参数默认是选择当前行的index

默认
但如果我们想要在选择rowSelection时,获取表格中的其他信息,比如当前行的id。或者我们有增加表格行或删除表格行的功能时。很显然用默认的index是不可取的。
我们只需要在表格的标签下,定义rowKey自己想得到的唯一性的数据,然后此时 onChange 第一个参数获取到的就是自己定义的当前行的数据了。

	<Table
	
        rowKey={row=> row.id}
        
        dataSource={dataSource}
        columns={columns}
        rowSelection={{
            selectedRowKeys,
            onChange: this.rowSelectionChange,
        }}
    />

改变后

<think>我们正在讨论AntDesignProTable组件中的查询表单显示方法。根据用户需求,他们想知道如何在ProTable中显示查询表单,并希望得到示例代码和配置方式。在AntDesignProTable中,查询表单默认是开启的,但我们可以通过配置来调整其显示和行为。主要配置点:1.通过`search`属性来控制查询表单的显示和配置。2.在`columns`数组中,我们可以为每一列配置搜索表单的渲染方式(通过`valueType`、`fieldProps`等)。参考引用[1]提到:ProTable会根据配置自动生成表格的查询Form表单,Form可以通过配置valueType的取值来实现不同的渲染需求。引用[2]则展示了在ProFormText中使用fieldProps来定制表单项的属性。在ProTable中,我们可以在列定义中配置`search`属性来控制该列在查询表单中的行为。下面是一个示例代码,展示如何配置ProTable的查询表单:</think>### 在 Ant Design ProTable 中显示查询表单的方法 ProTable 默认会显示查询表单,但需要通过配置启用和定制。以下是核心配置方法及示例代码: #### 1. 基础配置 ```jsx import { ProTable } from '@ant-design/pro-components'; export default () => { const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', // 启用该字段的搜索 search: true }, { title: '年龄', dataIndex: 'age', key: 'age', // 配置搜索表单中的输入类型 valueType: 'digit', search: { // 高级搜索配置 transform: value => ({ minAge: value[0], maxAge: value[1] }) } } ]; return ( <ProTable columns={columns} // 启用搜索表单 search={{ labelWidth: 'auto', filterType: 'query', // 表单类型:query(轻量) | light(标准) span: 6, // 表单项宽度 }} request={async (params) => { // 处理搜索参数 console.log('搜索参数:', params); return { data: [], success: true }; }} /> ); }; ``` #### 2. 高级配置示例 ```jsx <ProTable search={{ // 显示重置按钮 resetText: '重置', // 显示收起/展开按钮 collapseRender: (collapsed) => ( <span>{collapsed ? '展开' : '收起'}</span> ), // 自定义搜索栏样式 style: { backgroundColor: '#f0f2f5' }, // 表单提交前处理 beforeSubmit: (params) => { console.log('预处理参数:', params); return params; }, // 配置搜索表单项 optionRender: (searchConfig, props) => [ ...searchConfig.form.options, <Button key="export">导出数据</Button>, ], }} /> ``` #### 3. 字段级配置 在列定义中定制搜索表单元素: ```jsx const columns = [ { title: '状态', dataIndex: 'status', valueType: 'select', search: { // 下拉选项 valueEnum: { 0: { text: '关闭' }, 1: { text: '运行中' }, }, // 自定义表单项属性 fieldProps: { mode: 'multiple', placeholder: '请选择状态', allowClear: true, onChange: (value) => console.log('选择值:', value), } } }, { title: '创建时间', dataIndex: 'createTime', valueType: 'dateRange', search: { // 转换日期范围参数 transform: (value) => ({ startTime: value[0], endTime: value[1], }) } } ]; ``` #### 4. 完全自定义表单 ```jsx <ProTable search={false} // 禁用默认表单 toolBarRender={() => [ <ProForm // 手动嵌入表单 onFinish={async (values) => { console.log('提交值:', values); // 手动触发表格刷新 actionRef.current?.reload(); }} submitter={{ searchConfig: { submitText: '筛选' }}} > <ProFormText name="keyword" placeholder="关键词搜索" /> <ProFormSelect name="category" options={[ { label: '电子产品', value: 1 }, { label: '服装', value: 2 } ]} /> </ProForm> ]} /> ``` > **关键配置说明** > - `search: true`:在列定义中启用该字段的搜索 > - `valueType`:定义表单控件类型(text/select/date/digit等)[^1] > - `fieldProps`:传递原生 Antd 表单组件的属性[^2] > - `transform`:转换搜索参数格式 > - `collapseRender`:控制表单折叠行为
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值