QueryFilter / LightFilter 筛选表单

有些是时候表单要与别的组件组合使用,常见的有 Table ,List 等,这时候就需要一些特殊形态的表单。QueryFilter 和 LightFilter 解决了配合组件使用的问题,避免了复杂的样式设置。ProTable 中默认 支持了 QueryFilter 和 LightFilter 作为自己的筛选表单。

查询筛选

查询筛选-默认收起

查询筛选-垂直布局

查询筛选-搜索

轻量筛选

轻量筛选-边框模式

轻量筛选-折叠模式

折叠模式下所有的选项都会默认折叠,不管是否有值,控件的 secondary 将不再有效。

API

QueryFilter

QueryFilter 除了继承 ProForm 的 API 以外还支持下面的属性。

参数说明类型默认值
collapsed是否折叠超出的表单项,用于受控模式boolean-
defaultCollapsed默认状态下是否折叠超出的表单项booleantrue
onCollapse切换表单折叠状态时的回调(collapsed)=>void-
hideRequiredMark隐藏所有表单项的必选标记,默认隐藏booleantrue
defaultColsNumber自定义折叠状态下默认显示的表单控件数量,没有设置或小于 0,则显示一行控件; 数量大于等于控件数量则隐藏展开按钮number-
labelWidthlabel 宽度number | 'auto'80
span表单项宽度number[0 - 24]-
split每一行是否有分割线boolean-
preserve是否能够查询收起的数据,如果设置为 true,收起后的表单数据将会丢失booleantrue

响应式断点规则

注意,断点的值均为表单容器的大小而非视口大小。

默认布局时的规则
容器宽度断点单行展示表单列数(包含操作区域)默认布局
≧ 1352px4 列horizontal
≧ 1062px3 列horizontal
≧ 701px && < 1063px3 列horizontal
≧ 513px && < 701px2 列vertical
< 513px1 列vertical
强制上下布局时的规则
容器宽度断点单行展示表单列数(包含操作区域)
≧ 1057px4 列
≧ 785px && < 1057px3 列
≧ 513px && < 785px2 列
< 513px1 列

LightFilter

LightFilter 除了继承 ProForm 的 API 以外还支持下面的属性。

参数说明类型默认值
collapse是否默认折叠全部字段booleanfalse
collapseLabel折叠区域的标签ReactNode更多筛选 <DownOutlined/>
footerRender底部内容,当不需要默认底部按钮时,可以设为 footer={false}(onClear?: () => void, onConfirm: () => void) => JSX.Element | false)|false-