--- group: title: 通用组件 order: 2 title: StandardForm order: 4 toc: content --- # StandardForm 通用表单 ## 代码演示 ### 基本使用 ### 步骤表单 ### Tab表单 ### 实例获取 ## API | 参数 | 说明 | 类型 | 默认值 | 参考值 | |-----------------------|------------------------------------------------|-----------------------------|-------------------------------------------------|-------| | formItemGroup | 表单组 | Array | - | 字段查看 [formItemGroup API](#formitemgroup-api)| | layout | 表单布局 | String | horizontal |`horizontal`/`vertical` | | size | 控件尺寸 | String | middle |可选:`small`,`middle`,`large` | | grid | 栅格数量（`'layout='horizonal'或'vertical'`条件下才有此配置） | Number/String | 1 |NUmber: 最小为`1` ，最大为`3` ，超过`3`统一视为`3列` ; String:'`xs,sm,md,lg,xlg`' | | fieldStatus | 表单状态 | String | default |可选:`default`,`viewOnly`,`disabled` | | confirmText | 确认按钮文本 | '确认' | - | 设置为`null`时，则不显示按钮，且`onSubmit`无效 | | onSubmit | 点击保存（确认）,type为`form`时，参数中才有fields | Function()/Function(fields) | - |- | | confirmButtonProps | 确认按钮配置项 | Object | - |- | | cancelText | 取消按钮文本 | String | '取消' | 设置为`null`时，则不显示按钮，且`onCancel`无效 | | onCancel | 点击取消 | Function() | - |- | | cancelButtonProps | 取消按钮配置 | Object | - |- | | actionGroup | 自定义操作按钮 | Array/ReactNode | Array数据参数值查看[actionGroup API](#actiongroup-api) |替换默认按钮，如为[]时，将不显示任何按钮 | | actionAlign | 确认与取消按钮对齐方式(`layout=horizontal`时有效) | String | 'left' | `left`,`center`,`right` | | actionWrapperCol | 确认与取消按钮对齐方式,优先级高于` actionAlign ` | Object | | 参考官方对应Form.Item的wrapperCol | | initialValues | 表单组默认值配置 | Object | - | | | getFormFields | 获取当前表单实例 | Function(fields,form) | - | | | className | 扩展样式类 | String | - | | | prefix/children | 配置于`formItemGroup`前的结构 | ReactNode | - | | | postfix | 配置于`formItemGroup`后的结构 | ReactNode | - | | ### formItemGroup API | 参数字段 | 说明 | 类型 |必选项| 参考值| |----------|------|-------------|------|------| | label | 标签名称/条件名称 | String 或 ReactNode | 是 |- | | type | 控件类型 | String | 是 | 可以选择 `input`/`select`/`custom`等，参考[可选值](/field/field-component#type-可选值) | | componentStyle | 表单域样式,可设置宽度等 | Object | 否 | | | extra | 跟在表单域后的结构 | Function ReactNode | 否 | - | | filedName | 控件名称 | String | 是 |参考 [getFieldDecorator(id, options) 参数](https://ant.design/components/form-cn/#getFieldDecorator(id,-options)-参数) | | selectOptions | 选项列表 | Array | 否 | select/radio/checkbox等使用 ,选项值：{'label': 'xxx', value: 'xxx'}| | customRender | 必须结合 type="custom"使用 | Function(itemForm,itemData,fieldStatus, forceUpdateForm) ReactNode | 否 | itemForm表单获取值之类要添加 itemForm.current.getFieldsValue() | | required | 可结合 type="custom"使用,自定义校验规则时，可在label标签前显示* | Boolean| 否 | - | | isHide | 是否隐藏当前配置的组件(需要结合`protoFormItem.shouldUpdate`使用) | Boolean/Function(fieldValues, form)| 否 | fieldValues指当前配置表单内部的所有控件值，form指当前弹窗内部的表单实例 | | protoConfig | 原生的表单控件配置或者antd对应的配置参数,例如配置 protoConfig: { disabled: true }| Object| 否 | - | | protoFormItem | Form.Item 原始API | Object | 否|[官网API](https://ant.design/components/form-cn/#Form.Item) | | fields | （`stepForm`/`tabForm` 专有）表单控件组件用于| Array| `stepForm`/`tabForm`下为必选项| - | | actions |(`stepForm`专有)当前步骤下的底部按钮组合 | Array || 对象值[actions API](#actions-api) 或者`ReactNode` | | hideStep |隐藏在步骤条中显示的数级（即不占用数量），一般只在最后一级使用 |Boolean || - | | transform |提交值格式转换| `(values)=> {}`|否| `transform: (value) => { return { startTime: value[0],endTime: value[1],};}` | | parseTransform |初始值解析格式转换,由于配置了`transfrom`,则在赋值时，可能从url上获取转换值解析成原来需要支持的格式,或直接在initialValues处转换| `(values)=> {}`|否| `(values)=> ({...values, dateRange: [values.startTime, values.endTime]})` | | 其他 | 其他配置项目可查看 [itemGroup API](/components/item-group#itemgroup-api) | | |-| ### actionGroup API | 参数字段 | 说明 | 类型 |必选项| |----------|------|-------------|------| | name | 按钮文本 | String | 是 | | icon | 图标类名 | String/ReactNode/Array（['speci', 'plus']，至少传一个前缀名，一个图标类名两个值） | 否 | | type | 按钮类型 | String | 否 | | fn | 按钮点击事件 | Function | 否 | ### actions API | 参数字段 | 说明 | 类型 |必选项| |----------|------|-------------|------| | name | 按钮文本 | String | 是 | | action | 默认控制类型,指定next,或submit将会在内部默认执行配置表单的校验（不包括type="custom"内相关的表单) | String（可取值'prev','next','submit','cancel'） | 否 | | icon | 图标类名 | String/ReactNode/Array（['speci', 'plus']，至少传一个前缀名，一个图标类名两个值） | 否 | | type | 按钮类型 | String | 否 | | fn | 按钮点击事件 | Function(item,form) | 否 | ## StepForm API | 参数 | 说明 | 类型 | 默认值 | 参考值 | |----------|------------------------------------------|-------------|-------|-------| | formItemGroup| 表单组 | 字段查看 [formItemGroup API](#formitemgroup-api),actions:Array(按钮配置),Steps.Step其他基础配置>） | -| | stepsConfig| 原始Steps参数配置 | Object | -|查看官网| | stepClick| 默认按钮组点击事件 | Function(actionType,form) | -|actionType：当前点击的按钮（上一步prev、下一步next，确认submit,取消cancel）| | actionHide| 隐藏按钮组 | Boolean | -|为true时，stepClick相关事件无效 | | 其他基础配置| 同 [StandardForm API](#api) | - | -| >StepForm内部默认的按钮组跳转（如上一步、下一步、确认、提交等），将会默认在当前步骤跳转至下一步前，优先执行表单组内配置指定类型的表单控件（即有`fieldsName`控件）的校验， > >如果表单组内，有其他自定义的控件，如`type='custom'`则需要自添加样式规则，可根据当前所在步骤位置等做判断。同理在自定义的 `actions` 里面的执行事件 `fn` 也可自定义配置相关校验规则 > > tabForm切换前后校验需要自定义，调用form.validateFields() ## TabForm API | 参数 | 说明 | 类型 | 默认值 | 参考值 | |----------|------------------------------------------|-------------|-------|-------| | formItemGroup| 表单组 | Array | -| 字段查看 [formItemGroup API](#formitemgroup-api)| | tabsConfig| 原始Tabs参数配置 | Object | -|[查看官网](https://ant.design/components/tabs-cn/#API)| | 其他基础配置| 同 [StandardForm API](#api) | - | -|