步骤条组件 (Steps)

Element UI 的 Steps 组件用于引导用户按照流程完成任务，提供一个分步导航条。每个步骤可以包含标题、描述、图标等信息，支持横向和纵向排列。

提示

Steps 组件官方文档：https://element.eleme.cn/#/zh-CN/component/steps (opens new window)

1. 基本用法

说明：此示例展示了一个基本的三步水平步骤条，通过设置 active 属性来控制当前激活的步骤。每个步骤包含标题和描述。

<template>
  <el-steps :active="1">
    <el-step title="步骤 1" description="这是一段描述"></el-step>
    <el-step title="步骤 2" description="这是一段描述"></el-step>
    <el-step title="步骤 3" description="这是一段描述"></el-step>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 1 // 当前激活的步骤索引
    };
  }
};
</script>

2. Steps 属性

参数	说明	类型	可选值	默认值
space	每个 step 的间距，不填写将自适应间距	number / string	—	—
direction	显示方向	string	vertical / horizontal	horizontal
active	设置当前激活步骤	number	—	0
process-status	设置当前步骤的状态	string	wait / process / finish / error / success	process
finish-status	设置结束步骤的状态	string	wait / process / finish / error / success	finish
align-center	进行居中对齐	boolean	—	false
simple	是否应用简洁风格	boolean	—	false

3. Step 属性

参数	说明	类型	可选值	默认值
title	标题	string	—	—
description	描述性文字	string	—	—
icon	图标	string	传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入	—
status	设置当前步骤的状态	string	wait / process / finish / error / success	—

4. Step 插槽

插槽名称	说明
icon	自定义图标
title	自定义标题
description	自定义描述性文字

5. 常见使用示例

基础步骤条

说明：此示例展示了一个基本的水平步骤条，其中 el-steps 组件的 active 属性用于控制当前激活的步骤，而每个 el-step 的 title 和 description 属性分别用于设置步骤的标题和描述。

<template>
  <el-steps :active="1">
    <el-step title="步骤 1" description="这是一段描述"></el-step>
    <el-step title="步骤 2" description="这是一段描述"></el-step>
    <el-step title="步骤 3" description="这是一段描述"></el-step>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 1 // 当前激活的步骤索引
    };
  }
};
</script>

垂直步骤条

说明：此示例展示了一个垂直方向的步骤条，通过设置 direction="vertical" 来实现垂直排列，active 属性控制当前激活的步骤，步骤的标题和描述通过 title 和 description 设置。

<template>
  <el-steps :active="2" direction="vertical">
    <el-step title="步骤 1" description="这是一段描述"></el-step>
    <el-step title="步骤 2" description="这是一段描述"></el-step>
    <el-step title="步骤 3" description="这是一段描述"></el-step>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 2 // 当前激活的步骤索引
    };
  }
};
</script>

带图标的步骤条

说明：此示例展示了一个带有图标的步骤条，通过在每个 el-step 中使用 icon 属性为步骤设置不同的图标，title 用于设置步骤的标题，active 属性控制当前激活的步骤。

<template>
  <el-steps :active="1">
    <el-step title="步骤 1" icon="el-icon-edit"></el-step>
    <el-step title="步骤 2" icon="el-icon-upload"></el-step>
    <el-step title="步骤 3" icon="el-icon-circle-check"></el-step>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      active: 1 // 当前激活的步骤索引
    };
  }
};
</script>

简洁风格步骤条

说明：此示例展示了一个简洁风格的步骤条，通过设置 simple 属性应用简洁风格。需要注意的是，当启用 simple 风格时，align-center、description、direction、space 属性将失效。

<template>
  <div>
    <el-steps :active="1" simple>
      <el-step title="步骤 1" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" icon="el-icon-upload"></el-step>
      <el-step title="步骤 3" icon="el-icon-picture"></el-step>
    </el-steps>

    <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1 // 当前激活的步骤索引
    };
  }
};
</script>

特别说明：

• simple 属性：应用简洁风格，使步骤条更简洁。
• 无效属性：在简洁风格下，align-center、description、direction、space 属性将失效，因此无法使用这些属性调整步骤条的显示方式。

6. 常见场景与注意事项

• 流程引导：Steps 组件非常适合用于多步骤的操作流程引导，如表单填写、数据处理流程等。
• 简洁模式：如果步骤较少且需要简洁的展示方式，可以启用 simple 模式，使步骤条更简洁。
• 方向选择：根据页面布局和步骤内容的多少，选择 horizontal 或 vertical 方向。

总结

• 灵活的属性配置：通过 active、direction、process-status 等属性，灵活控制步骤条的显示和状态。
• 支持图标和插槽：支持自定义图标和插槽，增强步骤条的可定制性。
• 适用多种场景：无论是复杂流程还是简单流程，Steps 组件都能提供清晰的步骤导航。