【 ElementUI 组件Steps 步骤条使用新手详细教程】

本文介绍如何使用 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	自定义描述文案

觉得有用请点赞👍