当前位置：首页 > 前端教程

elementui elstep

2026-01-14 21:10:11前端教程

ElementUI 的 ElStep 组件

ElStep 是 ElementUI 提供的步骤条组件，用于展示任务流程或操作步骤。它通常与 el-steps 和 el-step 配合使用，支持多种样式和状态管理。

基本用法

最简单的步骤条可以通过 el-steps 包裹多个 el-step 实现：

<template>
  <el-steps :active="activeStep" finish-status="success">
    <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 {
      activeStep: 1 // 当前激活的步骤索引（从 0 开始）
    };
  }
};
</script>

属性说明

el-steps 属性：

active：当前激活的步骤索引（从 0 开始）。
finish-status：完成步骤的状态（wait、process、finish、error、success）。
align-center：是否居中对齐（默认 false）。
simple：是否使用简洁风格（默认 false）。

el-step 属性：

title：步骤标题。
description：步骤描述（可选）。
icon：自定义图标（支持 ElementUI 图标类名）。
status：手动设置状态（覆盖默认状态）。

高级用法

自定义图标
可以通过 icon 属性替换默认的步骤图标：

<el-step title="步骤1" icon="el-icon-edit"></el-step>

垂直步骤条
设置 direction="vertical" 实现垂直布局：

<el-steps direction="vertical" :active="1">
  <el-step title="步骤1"></el-step>
  <el-step title="步骤2"></el-step>
</el-steps>

动态状态切换
结合业务逻辑动态更新步骤状态：

<el-steps :active="currentStep">
  <el-step 
    v-for="(step, index) in steps" 
    :key="index" 
    :title="step.title" 
    :status="step.status">
  </el-step>
</el-steps>