ant-design / ant-design/pro-components

🧐[问题] ProTable 组件的 search 属性 中配置optionRender 为false 时

Open
#9,433 7 comments 0 reactions 0 assignees View on GitHub
question
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

### 🧐 问题描述

ProTable 组件的 search 属性 中配置optionRender 为false 时,我发现俩个问题:

1. 筛选条件是输入框时,只有输入完成后点下回车才能再次触发表格的request, 有没有控制输入完成后就立即调用的?还有就是这里输入的时候可以有个debounce
2. 如果是下拉框,这时选择一个选项后,就不触发表格的request了

示例代码就是官方提供的 “查询(无按钮)表格” 的代码
### 💻 示例代码
import { DownOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';

const valueEnum = {
0: 'close',
1: 'running',
2: 'online',
3: 'error',
};

export type TableListItem = {
key: number;
name: string;
containers: number;
creator: string;
status: string;
createdAt: number;
memo: string;
};
const tableListDataSource: TableListItem[] = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
tableListDataSource.push({
key: i,
name: 'AppName',
containers: Math.floor(Math.random() * 20),
creator: creators[Math.floor(Math.random() * creators.length)],
status: valueEnum[((Math.floor(Math.random() * 10) % 4) + '') as '0'],
createdAt: Date.now() - Math.floor(Math.random() * 100000),
memo:
i % 2 === 1
? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴'
: '简短备注文案',
});
}

const columns: ProColumns[] = [
{
title: '应用名称',
width: 80,
dataIndex: 'name',
render: (_) => {_},
},
{
title: '容器数量',
dataIndex: 'containers',
align: 'right',
sorter: (a, b) => a.containers - b.containers,
},
{
title: '状态',
width: 80,
dataIndex: 'status',
initialValue: 'all',
valueEnum: {
all: { text: '全部', status: 'Default' },
close: { text: '关闭', status: 'Default' },
running: { text: '运行中', status: 'Processing' },
online: { text: '已上线', status: 'Success' },
error: { text: '异常', status: 'Error' },
},
},
{
title: '创建时间',
tooltip: '这是一段描述',
width: 140,
key: 'since',
hideInSearch: true,
dataIndex: 'createdAt',
valueType: 'date',
sorter: (a, b) => a.createdAt - b.createdAt,
},
];

export default () => {
return (

columns={columns}
request={(params, sorter, filter) => {
// 表单搜索项会从 params 传入,传递给后端接口。
console.log(params, sorter, filter);
return Promise.resolve({
data: tableListDataSource,
success: true,
});
}}
rowKey="key"
pagination={{
showQuickJumper: true,
}}
search={{
optionRender: false,
collapsed: false,
}}
dateFormatter="string"
headerTitle="表格标题"
toolBarRender={() => [
查看日志,

导出数据

,

创建应用
,
]}
/>
);
};

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Start with the ProTable example using search={{ optionRender: false, collapsed: false }} and trace how its search inputs and select controls trigger the request callback. Verify the behavior for completed text input and dropdown selection, then make the expected request triggering and debounce behavior clear in the relevant tests or example.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.