跳转到内容

ProQueryFilter 筛选表单

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

使用演示

ProModalForm 和 ProDrawerForm 都提供了 trigger插槽 来减少 state 的使用,如果你需要使用 state 来控制可以使用 open 来控制打开与关闭。

基本使用

默认展开

垂直布局

隐藏按钮

API

ProQueryFilter 提供了与 ProForm 相同的 API,以下的是 ProQueryFilter 独有的 API,同时 ProForm 也支持以下 API。

Props

参数说明类型默认值
collapsed是否折叠超出的表单项,用于受控模式boolean-
default-collapsed默认状态下是否折叠超出的表单项booleantrue
label-widthlabel 宽度number | 'auto'80
span表单项宽度number[0 - 24]-
search-text搜索按钮文本string'查询'
reset-text重置按钮文本string'重置'
ignore-rules忽略所有表单项ruleboolean-
reset-on-submit重置时是否执行提交booleanfalse
default-form-items-number自定义折叠状态下默认显示的表单控件数量,没有设置或小于 0,则显示一行控件;数量大于等于控件数量则隐藏展开按钮number-

Events

事件名说明类型
collapse切换表单折叠状态时的回调(collapsed)=>void
resize宽高变化时的回调(width: number, height: number) => void

响应式断点规则

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

默认布局时的规则

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

强制上下布局时的规则

容器宽度断点单行展示表单列数(包含操作区域)
≧ 1057px4 列
≧ 785px && < 1057px3 列
≧ 513px && < 785px2 列
< 513px1 列

源代码

文档