本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。
效果图：
基础用法
简单的步骤条。
设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。 需要定宽的步骤条时，设置 space 属性即可，它接受 Number， 单位为 px， 如果不设置，则为自适应。 设置 finish-status 属性可以改变已经完成的步骤的状态。
<el-steps :active="activeStep" finish-status="success" align-center>
<el-step
v-for="(step, index) in steps"
:key="index"
:title="step.title"
></el-step>
</el-steps>
循环显示
const steps = [
{ title: "创建凭证" },
{ title: "选择物料" },
{ title: "领料单位" },
{ title: "领料人签名" },
];
Steps 属性
| 属性名 | 说明 | 类型 | 默认 |
|---|---|---|---|
| space | 每个 step 的间距，不填写将自适应间距。 支持百分比。 | number / string | '' |
| direction | 显示方向 | enum | horizontal |
| active | 设置当前激活步骤 | number | 0 |
| process-status | 设置当前步骤的状态 | enum | process |
| finish-status | 设置结束步骤的状态 | enum | finish |
| align-center | 进行居中对齐 | boolean | — |
| simple | 是否应用简洁风格 | boolean | — |
Step 属性
| 属性名 | 说明 | 类型 | 默认 |
|---|---|---|---|
| title | 标题 | string | '' |
| description | 描述文案 | string | '' |
| icon | Step 组件的自定义图标。 也支持 slot 方式写入 | string / Component | — |
| status | 设置当前步骤的状态， 不设置则根据 steps 确定状态 | enum | '' |
Step 插槽
| 插槽名 | 说明 |
|---|---|
| icon | 自定义图标 |
| title | 自定义标题 |
| description | 自定义描述文案 |
# 觉得有用请点赞👍
