Skip to content

FtAntdFormSearch 搜索表单组件

FtAntdFormSearch 是 @ftjs/antd 提供的搜索表单组件,专为表格搜索场景设计。

基本用法

FtAntdFormSearch 组件一般通过 table 的 column 中 search 属性来间接使用。针对搜索场景进行了优化,提供了更便捷的搜索体验和搜索配置缓存。

组件属性

FtAntdFormSearch 组件继承了 @ftjs/core 的表单属性,并扩展了 Ant Design Vue 特有的属性:

属性名说明类型默认值
formData表单数据(v-model:formData)T根据columns生成
columns表单列定义FtAntdFormColumn<T>[]-
cache表单配置缓存标识string-
internalFormPropsAnt Design Vue Form 组件的原生属性FormProps-

表单列类型

@ftjs/antd 提供了丰富的表单列类型,对应 Ant Design Vue 的表单组件:

类型说明对应组件
auto-complete自动完成AutoComplete
cascader级联选择Cascader
checkbox复选框Checkbox
date-picker日期选择器DatePicker
input-number数字输入框InputNumber
input输入框Input
mentions提及Mentions
radio单选框Radio
range-picker范围选择器RangePicker
rate评分Rate
select选择器Select
slider滑动输入条Slider
switch开关Switch
textarea文本域TextArea
tree-select树选择TreeSelect
upload上传Upload

WARNING

upload 组件由于业务自定义程度较高,后期将删除,建议使用自定组件注册的形式实现,参照:TDesign自定义组件Upload

事件

事件名说明回调参数
submit表单提交事件(formData: T) => void
update:formData表单数据更新事件(formData: T) => void

方法

方法名说明参数返回值
getFormData获取表单数据-T
resetToDefault重置表单到默认值-void
setAsDefault将当前值设为默认值[FormData]void
formInstanceant-design-vue 表单实例-FormInstance

Released under the MIT License.