2.14.0

步骤条 ​

引导用户按照流程完成任务。步骤可根据实际应用场景进行设置，且步骤数不能少于 2 个。

基础用法 ​

简单的步骤条。

设置 `active` 属性，类型为 `Number`，表示当前步骤的索引，从 0 开始。当步骤条的宽度需要固定时，可以设置 `space` 属性，它接受 `Number` 类型的值，单位为 `px`。如果不设置，它将是响应式的。设置 `finish-status` 属性可以改变已完成步骤的状态。

0
步骤 1
0
步骤 2
0
步骤 3

带状态的步骤条 ​

显示每个步骤的状态。

使用 `title` 属性设置步骤名称，也可以使用具名 `slot` 覆盖此属性。我们已在本页末尾为您列出所有插槽名称。

0
完成
0
进行中
0
步骤 3

居中 ​

标题和描述可以居中。

0
步骤 1
一些描述
0
步骤 2
一些描述
0
步骤 3
一些描述

带描述的步骤条 ​

每个步骤都有描述。

0
步骤 1
一些描述
0
步骤 2
一些描述
0
步骤 3
一些描述

带图标的步骤条 ​

步骤条中可以使用各种自定义图标。

通过 `icon` 属性设置图标。图标的类型可以在图标组件的文档中找到。此外，您还可以通过具名 `slot` 自定义图标。

步骤 1
步骤 2
步骤 3

竖向步骤条 ​

竖向步骤条。

只需在 `el-steps` 元素中将 `direction` 属性设置为 `vertical` 即可。

0
步骤 1
0
步骤 2
0
步骤 3

简洁步骤条 ​

简洁的步骤条，其中 `align-center`、`description`、`direction` 和 `space` 将被忽略。

步骤 1
步骤 2
步骤 3
步骤 1
步骤 2
步骤 3

Steps API ​

Steps 属性 ​

名称描述类型默认值
space每个步骤的间距，如果省略，将是响应式的。支持百分比。number / string''
direction显示方向枚举horizontal
active当前激活的步骤number0
process-status当前步骤的状态枚举进行中
finish-status最后一步的状态枚举finish
align-center标题和描述是否居中boolean—
simple是否应用简洁主题boolean—

Steps 事件 ​

名称描述参数
change激活步骤改变时触发Function

Steps 插槽 ​

名称描述子标签
default自定义默认内容步骤项

Step API ​

Step 属性 ​

名称描述类型默认值
title步骤标题string''
description步骤描述string''
icon步骤自定义图标。图标也可以通过具名插槽传入string / Component—
status当前状态。如果未配置，将由 Steps 自动设置。枚举''

Step 插槽 ​

名称描述
icon自定义图标
title步骤标题
description步骤描述

来源 ​

组件 • 样式 • 文档

贡献者 ​