FormStep
分步表单组件
注意
该组件只适用于 Schema 场景。
Markup Schema 案例
提示
通过createFormStep创建出来的对象属于@formily/reactive的响应式，在例子中通过FormConsumer包裹才实现了渲染的更新。
vue
<script setup lang="ts">
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer, FormProvider } from '@formily/vue'
import {
FormButtonGroup,
FormItem,
FormStep,
Input,
Submit,
} from '@silver-formily/element-plus'
import { ElButton } from 'element-plus'
const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
components: {
FormItem,
FormStep,
Input,
},
})
const formStep = FormStep.createFormStep()
const form = createForm()
async function log() {
formStep.submit(console.log)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaVoidField x-component="FormStep" :x-component-props="{ formStep }">
<SchemaVoidField
x-component="FormStep.StepPane"
:x-component-props="{ title: '第一步' }"
>
<SchemaStringField
name="aaa"
x-decorator="FormItem"
required
x-component="Input"
/>
</SchemaVoidField>
<SchemaVoidField
x-component="FormStep.StepPane"
:x-component-props="{ title: '第二步' }"
>
<SchemaStringField
name="bbb"
x-decorator="FormItem"
required
x-component="Input"
/>
</SchemaVoidField>
<SchemaVoidField
type="void"
x-component="FormStep.StepPane"
:x-component-props="{ title: '第三步' }"
>
<SchemaStringField
name="ccc"
x-decorator="FormItem"
required
x-component="Input"
/>
</SchemaVoidField>
</SchemaVoidField>
</SchemaField>
<FormConsumer>
<template #default>
<FormButtonGroup>
<ElButton
:disabled="!formStep.allowBack"
@click="
() => {
formStep.back()
}
"
>
上一步
</ElButton>
<ElButton
:disabled="!formStep.allowNext"
@click="
() => {
formStep.next()
}
"
>
下一步
</ElButton>
<Submit :disabled="formStep.allowNext" @submit="log">
提交
</Submit>
</FormButtonGroup>
</template>
</FormConsumer>
</FormProvider>
</template>
<style lang="scss" scoped></style>JSON Schema 案例
vue
<script setup lang="ts">
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer, FormProvider } from '@formily/vue'
import {
FormButtonGroup,
FormItem,
FormStep,
Input,
Submit,
} from '@silver-formily/element-plus'
import { ElButton } from 'element-plus'
const { SchemaField } = createSchemaField({
components: {
FormItem,
FormStep,
Input,
},
})
const schema = {
type: 'object',
properties: {
collapse: {
'type': 'void',
'x-component': 'FormStep',
'x-component-props': {
formStep: '{{formStep}}',
finishStatus: 'success',
},
'properties': {
step1: {
'type': 'void',
'x-component': 'FormStep.StepPane',
'x-component-props': {
title: '第一步',
},
'properties': {
aaa: {
'type': 'string',
'title': 'AAA',
'required': true,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
step2: {
'type': 'void',
'x-component': 'FormStep.StepPane',
'x-component-props': {
title: '第二步',
},
'properties': {
bbb: {
'type': 'string',
'title': 'BBB',
'required': true,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
step3: {
'type': 'void',
'x-component': 'FormStep.StepPane',
'x-component-props': {
title: '第三步',
},
'properties': {
ccc: {
'type': 'string',
'title': 'CCC',
'required': true,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
},
},
},
}
const form = createForm()
const formStep = FormStep.createFormStep()
async function log() {
formStep.submit(console.log)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" :scope="{ formStep }" />
<FormConsumer>
<template #default>
<FormButtonGroup>
<ElButton
:disabled="!formStep.allowBack"
@click="
() => {
formStep.back()
}
"
>
上一步
</ElButton>
<ElButton
:disabled="!formStep.allowNext"
@click="
() => {
formStep.next()
}
"
>
下一步
</ElButton>
<Submit :disabled="formStep.allowNext" @submit="log">
提交
</Submit>
</FormButtonGroup>
</template>
</FormConsumer>
</FormProvider>
</template>
<style lang="scss" scoped></style>API
FormStep
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| formStep | IFormStep | 传入通过 createFormStep 创建出来的模型 |
其余参考 https://cn.element-plus.org/zh-CN/component/steps.html
FormStep.StepPane
参考 https://cn.element-plus.org/zh-CN/component/steps.html
FormStep.createFormStep
ts
interface createFormStep {
(current?: number): IFormStep
}
interface IFormStep {
// 当前索引
current: number
// 是否允许向后
allowNext: boolean
// 是否允许向前
allowBack: boolean
// 设置当前索引
setCurrent: (key: number) => void
// 提交表单
submit: Formily.Core.Models.Form['submit']
// 向后
next: () => void
// 向前
back: () => void
}