Form 表单
查询条件
useForm设置表单布局样式
使用方法操作表单
表单使用案例
下拉框使用字典
dict直接传入字典值, struc 使用方法请参照：类字典配置
ts
import { dict, struc } from '@dt-frames/core'
{
component: 'Select',
label: '测试',
name: 'test',
props: {
options: dict('xxx')
}
},
{
component: 'Select',
label: '测试1',
name: 'test1',
props: {
options: struc('xxx')
}
}API
UseForm
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| mode | 表单使用场景 | 'search' | 'dialog' | null | 'search' | |
| model | 默认绑定的model | Recordable | ||
| layout | 对齐方式 | 'vertical' | 'inline' | 'horizontal' | horizontal | |
| labelWidth | 标签的宽度 | Number | String | 100 | |
| enLabelWidth | 英文标签宽度 | Number | String | 100 | |
| schemas | 表单数据配置 | FormSchema[] | [] | |
| labelAlign | label 标签的文本对齐方式 | 'left' | 'right' | right | |
| labelCol | label 标签布局样式设置,同 Col 组件 | ColEx | ||
| wrapperCol | 内容区域更多设置, 同 Col 组件 | ColEx | ||
| rowProps | 行相关样式 | |||
| colProps | 列相关样式, 同 Col 组件 | ColEx | ||
| size | 元素的尺寸 | 'small' | 'middle' | 'large' | small | |
| disabled | 表单是否禁用 | boolean | false | |
| compact | 是否使用紧凑布局 | boolean | true | |
| colon | label后面是否需要':' | boolean | true | |
| allowClear | 是否显示清除按钮 | boolean | true | |
| autoFetch | 是否自动查询, 仅'search'模式支持 | boolean | true | |
| autoFetchOnEnter | 回车键搜索, 仅'search'模式支持 | boolean | true | |
| minShowColumn | 最小显示的条目数, 仅'search'模式支持 | number | 2 | |
| showAdvancedButton | 是否显示折叠按钮, 仅'search'模式支持 | boolean | true | |
| scrollToFirstError | 提交失败自动滚动到第一个错误字段, 仅'dialog'模式支持 | boolean | true | |
| buttons | 表单后面的按钮（查询条件设置后会替换原有的查询 重置按钮） | ButtonProps[] | null | boolean | false |
FormSchema 公共配置
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| colon | lable后面是否有冒号 | boolean | true | |
| colProps | 当前item栅格布局控制 | ColEx | ||
| colSlot | 整个item使用插槽 | v-slot | ||
| component | 目前支持的表单控件类型 | 'Input' | 'InputWithDialog' | 'InputGroup' | 'InputPassword' | 'InputSearch' | 'InputTextArea' | 'InputNumber' | 'Select' | 'TreeSelect' | 'Radio' | 'RadioButtonGroup' | 'RadioGroup' | 'Checkbox' | 'CheckboxGroup' | 'AutoComplete' | 'Cascader' | 'DatePicker' | 'MonthPicker' | 'RangePicker' | 'WeekPicker' | 'TimePicker' | 'Switch' | 'Upload' | 'Slider' | 'Rate' | 'Divider' | ||
| defaultValue | 默认值 | any | ||
| description | 对表单项进行说明 | string | null | |
| disabled | 是否禁用 | boolean | ( ( model: Recordable ) => boolean ) | |
| dynamicRules | 动态规则（通过后台校验） | (model: Recordable) => Rule[] | ||
| enLabelWidth | 英文状态标签的宽度 | number | string | ||
| extraName | 点击控件后面的删除按钮需要清空的属性 | string[] | ||
| label | 标签名 | string | ||
| labelCol | 标签样式及布局 | ColEx | ||
| labelWidth | 标签宽度 | number | string | ||
| name | 表单绑定的属性，亦作为name属性 | string | string[] | ||
| prefix | 输入框的前缀 | string | number | VNode | ( ( model: Recordable ) => VNode | VNode[] | string ) | ||
| props | 表单控件参数 | FormSchema.props | (( model: Recordable ) => FormSchema.props) | ||
| render | 自定义渲染控件 | (model: Recordable) => VNode | VNode[] | string | ||
| renderCol | 自定义渲染整个item（包含label） | (model: Recordable) => VNode | VNode[] | string | ||
| renderComponent | 在表单最后面追加一个元素，如：输入框后面添加单位(个) | ((model: Recordable) => Recordable) | VNode | VNode[] | string | ||
| required | 是否必填 | boolean | ( ( model: Recordable ) => boolean ) | Ref<boolean> | ComputedRef<boolean> | false | |
| rules | 验证规则 | Rule[] | ||
| rulesMessageJoinLabel | 提示信息是否带上lable | boolean | true | |
| show | 控件是否显示 | boolean | ( ( model: Recordable ) => boolean ) | |
| slot | 自定义控件使用插槽 | v-slot | ||
| subLabel | 标签描述 如 这是标签(subLable): *** | string | ||
| suffix | 输入框的后缀 | string | number | VNode | ( ( model: Recordable ) => VNode | VNode[] | string ) | ||
| t | 国际化中文描述 | string | null | |
| toolTip | 提示信息 | boolean | (( model: Recordable ) => boolean) | ||
| toolTipProps | 提示信息 | TooltipProps | ||
| wrapperCol | 内容样式及布局 | ColEx |
FormSchema.props
| 控件类型 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| Input | InputGroup | InputPassword | InputSearch | InputTextArea | 输入框 | Input | ||
| InputWithDialog | 点击输入框弹出弹框 | Input & { openDialog?: (model: Recordable) => void } | ||
| InputNumber | 数字输入框 | InputNumber | ||
| Select | 下拉框 | Select | ||
| TreeSelect | 树形下拉数据 | TreeSelect | ||
| Radio | RadioButtonGroup | RadioGroup | 单选按钮 | Radio | ||
| Checkbox | CheckboxGroup | 复选框 | Checkbox | ||
| AutoComplete | 自动填充 | AutoComplete | ||
| Cascader | 级联选择 | Cascader | ||
| DatePicker | MonthPicker | RangePicker | WeekPicker | TimePicker | 级联选择 | DatePicker | ||
| Slider | 滑动输入条 | Slider | ||
| Rate | 评分 | Rate | ||
| Divider | 分割线 | Divider |
ColEx
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| style | 样式 | CSSProperties | ||
| span | 占用空间大小 | number | string | ||
| order | 排序 | number | string | ||
| offset | 偏移量 | number | string | ||
| md | 中等屏幕 | number | string | ||
| xl | 小电脑屏幕 | number | string | ||
| xxl | 大屏幕 | number | string |
FormActionMethods回调
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| setProps | 设置form属性 | ( props: FormProps ) => void |
| updateSchema | 动态根据name属性跟新表单条目 | (data: Partial<FormSchema> | Partial<FormSchema>[]) => void |
| resetSchema | 动态重置formSchema为传入的参数 | (data: Partial<FormSchema> | Partial<FormSchema>[]) => void |
| clearValidate | 清除错误信息提示 | (name?: string | string[]) => Promise<void> |
| resetForms | 重置表单至初始状态 | () => void |
| removeFormByName | 根据name删除条目 | (name: string | string[]) => void |
| setFormValues | 设置表单绑定的值 | (values: Recordable) => Promise<void> |
| getFormValues | 获取表单绑定的值 | () => Recordable |
| appendFormItems | 动态追加表单条目 | ( schema: FormSchema[], prefixField: string | undefined, first?: boolean | undefined ) => void |
| validate | 验证表单输入是否有效 | () => Promise<any> |