ant-design / ant-design/pro-components

🐛[BUG] ProTable查询表格 查询表单查询没有进行模糊筛选

Open
#8,562 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

### 🐛 bug 描述

输入单个字母o或c时,没有筛选出对应的数据,筛选单个字母a时是正常的;
将label设置为item.name时筛选正常

### 📷 复现步骤
仅输入一个字母,如o、C

### 🏞 期望结果
输入单个字母时查询结果正常

### 💻 复现代码

```
import { ProTable } from "@ant-design/pro-components";
import { DefaultOptionType } from "antd/es/select";
const dataSource = [
{
id: "1",
num: "OT203",
name: "测",
},
{
id: "2",
num: "A22-SA22",
name: "测试",
},
{
id: "3",
num: "C2-TGH4",
name: "测试221",
},
{
id: "4",
num: "C23-cH9",
name: "测试122",
},
];
const list = [
{
id: "1",
num: "OT203",
name: "12",
},
{
id: "2",
num: "A22-SA22",
name: "测试222",
},
{
id: "3",
num: "C22GTH2",
name: "12121",
},
{
id: "4",
num: "C23CH9",
name: "项目cH",
},
{
id: "6",
num: "C12-TCH3",
name: "项目TCH2",
},
{
id: "8",
num: "C23-SAL0",
name: "SAL0",
},
{
id: "9",
num: "B23-SAL9",
name: "SAL20221",
},
{
id: "11",
num: "C219IT01",
name: "IT11",
},
];

const columns = [
{
title: "编号",
dataIndex: "num",
valueType: "select",
fieldProps: {
showSearch: true,
options: list?.map((item) => ({
value: item.num,
label: (
<>
{item.num}


{item.name}

),
})) as DefaultOptionType[],
optionFilterProp: "value",
filterOption: true,
},
},
{
title: "名称",
dataIndex: "name",
search: false,
},
];

export default () => {
return (

);
};
```

### © 版本信息

-@antd-design/icons 5.3.7
-@antd-design/pro-components 2.7.11
-antd 5.19.1
-react 18.3.1
-umi-request 1.4.0
-react-dom 18.3.1
-浏览器 microsoft edge

### 🚑 其他信息

![screenshot-1720777036457](https://github.com/user-attachments/assets/e32e0085-3c00-401f-807a-e00a2fe28591)

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the provided ProTable example using the listed React, TypeScript, antd, and pro-components versions. Inspect the ProTable query form and Ant Design Select filtering behavior around optionFilterProp, then verify that single-letter searches such as “o” and “c” return the expected matching options.

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
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.