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 | - |
internalFormProps | Ant 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 |
WARNING
upload
组件由于业务自定义程度较高,后期将删除,建议使用自定组件注册的形式实现,参照:TDesign自定义组件Upload
事件
事件名 | 说明 | 回调参数 |
---|---|---|
submit | 表单提交事件 | (formData: T) => void |
update:formData | 表单数据更新事件 | (formData: T) => void |
方法
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
getFormData | 获取表单数据 | - | T |
resetToDefault | 重置表单到默认值 | - | void |
setAsDefault | 将当前值设为默认值 | [FormData] | void |
formInstance | ant-design-vue 表单实例 | - | FormInstance |