如图所示，当前有一个StepsForm表单，代码如下（基本就是官网的示例修改的）
const Demo: React.FC = () => {
const Option = [
key: '1',
value: '111',
label: '个人'
key: '2',
value: '222',
label: '合作'
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
return (
<ProCard>
<StepsForm<{
name: string;
onFinish={async (values) => {
console.log(values);
await waitTime(1000);
message.success('提交成功');
formProps={{
validateMessages: {
required: '此项为必填项',
submitter={{
render: (props) => {
if (props.step === 0) {
return (
<Button>
</Button>
<Button type="primary" onClick={() => props.onSubmit?.()}>
</Button>
if (props.step === 1) {
return (
<Button type="primary" key="pre" onClick={() => props.onPre?.()}>
</Button>
<Button key="goToTree">
</Button>
<Button type="primary" key="goToTree" onClick={() => props.onSubmit?.()}>
</Button>
return (
<Button type="primary" key="pre" onClick={() => props.onPre?.()}>
</Button>
<Button key="goToTree">
</Button>
<Button type="primary" key="goToTree" onClick={() => props.onSubmit?.()}>
</Button>
containerStyle={{textAlign:'center'}}
<StepsForm.StepForm<{
name: string;
name="base"
title="创建实验"
layout='horizontal'
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
onFinish={async ({ name }) => {
console.log(name);
await waitTime(2000);
return true;
<Row gutter={48}>
<Col span={12}>
<ProFormText
name="titleState"
label="语文"
width="md"
placeholder="请输入"
<ProFormSelect
name="assetType"
label="类型"
width="md"
// placeholder="请选择"
options={Option}
<ProFormText
name="originTitleUnit"
label="英语"
width="md"
placeholder="请输入"
<Col span={12}>
<ProFormText
name="useState"
label="物理"
width="md"
placeholder="请输入"
<ProFormText
name="location"
label="生物"
width="md"
placeholder="请输入"
<ProFormText
name="currentTitleUnit"
label="化学"
width="md"
placeholder="请输入"
</StepsForm.StepForm>
<StepsForm.StepForm<{
checkbox: string;
name="checkbox"
title="设置参数"
<ProFormCheckbox.Group
name="checkbox"
label="迁移类型"
width="lg"
options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
<ProForm.Group>
<ProFormText name="dbname" label="业务 DB 用户名" />
<ProFormDatePicker name="datetime" label="记录保存时间" width="sm" />
<ProFormCheckbox.Group
name="checkbox"
label="迁移类型"
options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
</ProForm.Group>
</StepsForm.StepForm>
<StepsForm.StepForm name="time" title="发布实验">
<ProFormCheckbox.Group
name="checkbox"
label="部署单元"
rules={[
required: true,
options={['部署单元1', '部署单元2', '部署单元3']}
<ProFormSelect
label="部署分组策略"
name="remark"
rules={[
required: true,
initialValue="1"
options={[
value: '1',
label: '策略一',
{ value: '2', label: '策略二' },
</StepsForm.StepForm>
</StepsForm>
</ProCard>
