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 (
<ProTable
search={{
filterType: 'light', //轻量模式
placement: 'bottomLeft',
}}
searchFormRender={(props) => {
return (
<ProFormDependency name={['name']}>
{({ name }) => {
return (
<ProFormSelect
options={[
{
value: 'chapter',
label: '盖章后生效',
},
]}
width="md"
name="useMode"
label={
与《${name}》合同约定生效方式}/>
);
}}
<ProFormTreeSelect
label="住址"
fieldProps={{
fieldNames: {
label: 'title',
},
treeData,
placeholder: 'Please select',
}}
name="treeSelect"
/>
);
}}
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;`
至于searchFormRender 使用 LightFilter是因为在自带的ProTable search.filterType = 'light'时有不少问题官方无法及时修复 例如dateRange 出现Invalid Date treeSelect选中后展示的value 等