本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。
效果图:
基础用法
简单的步骤条。
设置 active
属性,接受一个 Number
,表明步骤的 index,从 0 开始。 需要定宽的步骤条时,设置 space
属性即可,它接受 Number
, 单位为 px
, 如果不设置,则为自适应。 设置 finish-status
属性可以改变已经完成的步骤的状态。
<el-steps :active="activeStep" finish-status="success" align-center><el-stepv-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 | 自定义描述文案 |
# 觉得有用请点赞👍