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

[Zengets]

🔩 所属模块或组件

率属组件：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 (

<ProTable search={{ filterType: 'light', //轻量模式 placement: 'bottomLeft', }} searchFormRender={(props) => { return ( <LightFilter placement="bottomLeft" footerRender={false}> <ProFormText label="Search" name="name"></ProFormText> <ProFormDependency name={['name']}> {({ name }) => { return ( <ProFormSelect options={[ { value: 'chapter', label: '盖章后生效', }, ]} width="md" name="useMode" label={与《${name}》合同约定生效方式} /> ); }} </ProFormDependency> <ProFormTreeSelect label="住址" fieldProps={{ fieldNames: { label: 'title', }, treeData, placeholder: 'Please select', }} name="treeSelect" /> </LightFilter> ); }} 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号', }, ]} ></ProTable>

); }

export default Rule;`

至于searchFormRender 使用 LightFilter是因为在自带的ProTable search.filterType = 'light'时有不少问题官方无法及时修复 例如dateRange 出现Invalid Date treeSelect选中后展示的value 等