ant-design / ant-design/pro-components

🧐[问题] 如何透過 column 配置將 ProTable search 輸入欄合併

Open
#8,652 0 comments 0 reactions 0 assignees View on GitHub
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 })),
];
```
### 🚑 其他信息
示例代码呈現結果
![image](https://github.com/user-attachments/assets/adb881e3-0af8-410e-897e-e4d0b69ea6a5)
這張是把 noStyle 拔掉後呈現的樣式
![image](https://github.com/user-attachments/assets/b2493371-952d-4378-b428-703d4b1c5d3e)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.