跳转到内容

ProStepsForm 分步表单

ProStepsForm 通过 Provider 来管理子表单的数据,每个子表单都是完整的数据,在 ProStepsForm 组合成最后的数据。同时自带了一个进度条和管理进度条的相关 API.

使用演示

基本使用

垂直模式

API

ProStepsForm 提供了与 ProForm 相同的 API,以下的是 ProStepsForm 独有的 API,同时 ProForm 也支持以下 API。

Props

参数说明类型默认值
current当前表单的步骤数,从 0 开始number0
steps配置分步内容,与Antv Step 相同。额外支持配置每步的 FormPropsStepProps & { formProps?: BaseFormProps }[]
items表单的定义,分步表单,需要使用 json 数组来生成多个表单ProFormItemType[][][]
steps-props分步表单步骤条的配置,与Antv Steps 相同StepsProps-
container-style分步表单容器样式CSSProperties-

Events

事件名说明类型
current-changecurrent 发生改变的事件(current:number) => void
finish表单最后一步提交成功触发,如果返回true就会自动重置表单(包括StepsForm变回第一步)(values:T) => Promise<void | boolean>

源代码

文档