StepsForm 分步表单
StepsForm 组件是 ElSteps,ElStep和 PlusForm 组件的组合,支持 PlusForm 组件的所有自定义函数和插槽, 它的主要用途是引导用户按照流程完成任务的分步导航条, 可根据实际应用场景设定步骤,步骤不得少于 2 步。
基础用法
设置 active 属性,接受一个 Number,表明步骤,从 1 开始。data 是分步表单所需的数据。
垂直的分步表单
垂直方向的分步表单。
只需要设置 direction 属性为 vertical 即可。
带图标的分步表单
通过 icon 属性来设置图标, 图标的类型可以参考 Icon 组件的文档。
简洁风格的分步表单
设置 simple 可应用简洁风格,该条件下 align-center / description / direction / space 都将失效。
插槽渲染分步表单头部
设置 simple 可应用简洁风格,该条件下 align-center / description / direction / space 都将失效。
插槽渲染分步表单每一步内容
v0.1.22 新增设置 step-* 可应用自定义插槽渲染每一步内容,*表示的是步骤数,从 1 开始。
StepsForm API
StepsForm Attributes
| 名称 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
model-value / v-model | 分步表单绑定的第几步值 | number | 1 | 否 (v0.1.14 版本前是 必须) |
data | 分步表单展示的数据 | array PlusStepFromRow[] | [] | 否 (v0.1.14 版本前是 必须) |
submitText v0.1.14 | 提交按钮文字 | string | 提交 | 否 |
nextText v0.1.14 | 下一步按钮文字 | string | 下一步 | 否 |
preText v0.1.14 | 上一步按钮文字 | string | 上一步 | 否 |
| ... | ... | ... | ... | ... |
...表示同时支持所有 ElSteps Attributes
StepsForm Events
| 名称 | 说明 | 类型 |
|---|---|---|
change | 表单变化触发的事件 | function |
pre | 点击上一步按钮触发的事件 | function |
next | 点击下一步(提交)按钮校验通过触发的事件 | function allValues参数为v0.1.23新增 |
submit v0.1.23 | 点击提交按钮触发的事件 | function |
StepsForm Slots
| 插槽名 | 说明 | 作用域插槽参数 |
|---|---|---|
| step-* v0.1.22 | 每一步内容的插槽,*表示的是步骤数,从 1 开始 | {title,form,description,icon,status} PlusStepFromRow |
| ... | ... | ... |
...表示同时支持所有 ElStep 的其他插槽 如 icon, title, description