elementui elstep

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>

注意事项

• 步骤索引从 0 开始，active 值为 1 表示第二个步骤处于激活状态。
• 可通过 status 强制覆盖步骤状态（如标记某步骤为错误状态）。
• 简洁模式（simple）适用于空间受限的场景。