ant-design / ant-design/pro-components
🧐[问题] 如何透過 column 配置將 ProTable search 輸入欄合併
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
### 🧐 问题描述
我想只透過 column 配置兩個輸入欄位並將兩者合併顯示
類似於 formSet => type = group 那樣子呈現
我嘗試使用 valueType: 'formSet' 去做但會出現 colSize 配置失效的問題
我查看了源碼也不知道他是在哪個資料夾被預設替換的
除此之外我還得對 formSet 底下的合併欄位手動調整其 noStyle 來讓 formSet => type: 'group' 能正確吃到樣式
也會有 ProColumnType 內部不具有 columns 的型別問題發生
我看了一下型別定義 好像是 ProColumnType 與 ProFormColumnsType 並非一致的關係
但這樣是不是也代表在 ProTable 是不支持 valueType => formSet 的 search 配置
是不是目前還不支持 ProTable 簡單透過 column 就可以配置合併欄位~?
還是我的思路有錯 請各位大神幫小弟我解惑一下 感謝!
### 💻 示例代码
node => v16.20.2
antd => 5.15.2
@ant-design/pro-components => 2.6.49
```typescript
import { ProColumnType } from '@ant-design/pro-components';
// ...
const searchColumns: ProColumnType[] = [
{
dataIndex: 'test1',
valueType: 'formSet',
fieldProps: {
type: 'group',
},
colSize: 2, // 這裡失效
columns: [ // 出現 ts 錯誤 => 物件常值只可指定已知的屬性,且類型 'ProColumnType' 中沒有 'columns'。
{
dataIndex: 'timeType',
valueType: 'select',
initialValue: TimeType.PAYOUT,
valueEnum: TimeTypeMap.getValueEnum(),
formItemProps: {
noStyle: true, // 得額外配置否則 border 不會正確配置為合併樣式
},
fieldProps: {
style: {
width: '30%',
},
},
},
{
dataIndex: 'rangeDate',
valueType: 'dateTimeRange',
initialValue: [dayjs().startOf('day'), dayjs().endOf('day')],
formItemProps: {
presets: DateOption.getRangePresets(),
noStyle: true, // 得額外配置否則 border 不會正確配置為合併樣式
},
fieldProps: {
style: {
width: '70%',
},
},
},
],
},
{
title: '账户名',
dataIndex: 'userName',
valueType: 'text',
colSize: 2, // 這邊可以正常配置 col 占比
},
// ...
];
// ...
return [
...searchColumns.map((item) => ({ ...item, hideInTable: true })),
...tableColumns.map((item) => ({ ...item, hideInSearch: true })),
];
```
### 🚑 其他信息
示例代码呈現結果

這張是把 noStyle 拔掉後呈現的樣式

Contributor guide
Research direction
Start by tracing how ProTable search columns handle valueType: 'formSet' and colSize, then inspect the ProColumnType definition involved in the reported columns type error. Confirm whether grouped search fields are supported through the column configuration and document or test the expected behavior, including the noStyle handling and merged-field layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100