分步表单
分步表格组件通过将复杂表单拆解为多个步骤，引导用户逐步完成填写。
切换步骤
通过注入的 api.el 方法操作分步表单（ref_F2vulxvqc841dac），动态设置其激活状态为步骤2，实现步骤切换功能。
js
function onChange($inject) {
$inject.api.el('ref_F2vulxvqc841dac').active = 2;
}获取子表单 api
js
function onChange($inject) {
const api = $inject.api.el('ref_F2vulxvqc841dac').subApi;
}Props
| 属性名 | 类型 | 默认值 | 必需 | 说明 |
|---|---|---|---|---|
| stepsProps | Object | - | 否 | 步骤条属性配置 |
| modelValue | Object | - | 否 | 双向绑定的表单数据 |
| formCreateInject | Object | - | 否 | FormCreate注入对象 |
| autoValidate | Boolean | - | 否 | 是否自动验证 |
| submitBtn | Boolean | - | 否 | 是否显示提交按钮 |
| steps | Array | [] | 是 | 步骤配置数组 |
| options | Object | { submitBtn: false, resetBtn: false } | 否 | 表单配置选项 |
Events
| 事件名 | 参数 | 说明 |
|---|---|---|
| update:modelValue | value | 表单数据更新事件 |
| change | value | 表单数据变化事件 |
| itemMounted | api | 子表单挂载完成事件 |
| submit | formData, api | 表单提交事件 |
| next | {active, api} | 下一步切换事件 |
| validateFail | api | 表单验证失败事件 |
Methods
| 方法名 | 参数 | 说明 | 返回值 |
|---|---|---|---|
| init | - | 初始化步骤表单 | - |
| onPrev | - | 上一步操作 | - |
| validate | - | 验证当前步骤表单 | Promise |
| onNext | - | 下一步操作 | - |
| submit | - | 提交整个表单 | - |
| addSubApi | api | 添加子表单API实例 | - |
| formData | value | 处理表单数据变化 | - |
| setValue | value | 设置表单值 | - |
Data
| 数据名 | 初始值 | 说明 |
|---|---|---|
| active | 0 | 当前激活的步骤索引 |
| cacheRule | [] | 缓存的分步规则 |
| cacheValue | {} | 缓存的表单数据 |
| subApi | {} | 子表单API实例 |
| Form | markRaw(formCreateInject.form.$form()) | Form组件实例 |