Skip to content

SearchForm ​

根据配置自动生成列表页的查询表单,以保持统一样式与快速实现。

使用方法 ​

搭配Table组件使用 ​

通常搭配Table组件、useTableList使用。

单独使用 ​

以下是单独使用的例子:

基础用法
显示代码

联动 ​

参考ProFormFields

API ​

参数名类型描述
fieldsField[]搜索条件表单配置数组
columnnumber搜索框的列数量
defaultValueRecord<string, any>搜索表单的默认值
showActionsboolean是否显示搜索、清空按钮
formItemPropsRecord<string, any>表单Field的Item的统一配置,参见element-plus的Form.Item的配置
collapsibleboolean是否启用展开收起功能
defaultCollapsedboolean默认是否收起,默认为 true
collapseRowsnumber收起时显示的行数,默认为 1
collapsedFieldsstring[]收起时显示的字段名称列表,优先级高于 collapseRows, 配置后收起时只展示指定字段

Field ​

参数名类型描述
labelstring字段标签名称
namestring字段名称
typestring字段类型:input、select、radio、checkbox、datePicker 和 component
componentany自定义组件
fieldPropsRecord<string, any>字段组件的选项
mappingPropstring[]将单条搜索字段映射为多字段, 用于将rangePicker等数组数据分别映射为多个字段

Events ​

事件名称回调参数描述
submit...args提交搜索
reset...args重置搜索
changeformData: object表单数据发生变化时触发