ant-design / ant-design/pro-components

👑 [需求] LightFilter 下使用 ProFormDependency 样式不一致

Open
#8,209 0 comments 0 reactions 0 assignees View on GitHub
⭕️ bug form
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🔩 所属模块或组件

率属组件:LightFilter

### 🥰 需求描述

LightFilter 下使用 ProFormDependency 样式不一致,希望 ProFormDependency下的ProFormFields按照LightFilter的样式正常展示

### ⛰ 功能需求适用场景

查询时联动修改下拉框数据

### 🧐 解决方案

应用样式时不要仅仅在 LightFilter 下的一级DOM层应用

### 🚑 其他信息

`import {
LightFilter,
ProFormDependency,
ProFormSelect,
ProFormText,
ProFormTreeSelect,
ProTable,
} from '@ant-design/pro-components';

function Rule() {
const treeData = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
},
],
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
children: [
{
title: 'Child Node3',
value: '0-1-0',
key: '0-1-0',
},
{
title: 'Child Node4',
value: '0-1-1',
key: '0-1-1',
},
{
title: 'Child Node5',
value: '0-1-2',
key: '0-1-2',
},
],
},
];
return (


{
return (



{({ name }) => {
return (

);
}}



);
}}
columns={[
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
valueType: 'treeSelect',
request: () => treeData,
valueEnum: {
'0-0': { text: 'Node1' },
},
},
]}
dataSource={[
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
]}
>

);
}

export default Rule;`

![image](https://github.com/ant-design/pro-components/assets/18044670/d86fb22f-9583-4d9f-bf99-8a67088c0d8d)
至于searchFormRender 使用 LightFilter是因为在自带的ProTable search.filterType = 'light'时有不少问题官方无法及时修复 例如dateRange 出现Invalid Date treeSelect选中后展示的value 等

Contributor guide

Open the contributing guide

Research direction

Reproduce the example with LightFilter, ProFormDependency, and the ProForm fields shown in the issue, then inspect how LightFilter applies styles to nested fields. Confirm the behavior with the provided ProTable searchFormRender example; done means ProFormDependency fields use the same LightFilter styling as directly nested fields.

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.