elementui steps

ElementUI Steps 组件指南

ElementUI 的 Steps 组件用于展示任务流程或步骤进度，适用于向导、订单跟踪等场景。以下是关键用法和配置说明：

基础用法

<el-steps :active="active" finish-status="success">
  <el-step title="步骤1"></el-step>
  <el-step title="步骤2"></el-step>
  <el-step title="步骤3"></el-step>
</el-steps>

active 属性控制当前激活步骤（从 0 开始计数），finish-status 设置完成状态样式（success/error/wait）。

自定义样式

通过 space 属性控制步骤间距（单位px）：

<el-steps :space="200">
  <el-step title="步骤1" description="描述信息"></el-step>
</el-steps>

description 可添加步骤描述文本，icon 属性支持替换默认图标：

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

垂直方向

添加 direction 属性实现竖向步骤条：

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

状态控制

单个步骤可通过 status 指定状态：

<el-step title="步骤1" status="error"></el-step>

可选状态值：wait（默认）、process、finish、error、success。

高级配置

align-center 属性使步骤居中对齐：

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

process-status 可自定义进行中状态的显示文本：

<el-steps :active="1" process-status="loading">
  <el-step title="步骤1"></el-step>
</el-steps>

事件绑定

Steps 组件支持 click 事件：

<el-steps @click="handleStepClick">
  <el-step title="步骤1"></el-step>
</el-steps>

methods: {
  handleStepClick(step) {
    console.log(step.index);
  }
}

响应式设计

结合 Vue 数据动态控制步骤状态：

data() {
  return {
    active: 0,
    steps: [
      { title: '注册', status: 'finish' },
      { title: '验证', status: 'process' }
    ]
  }
}

注意事项：

1. 步骤索引从 0 开始计数
2. 通过 CSS 可自定义步骤条颜色和图标大小
3. 复杂场景建议结合 Vuex 管理步骤状态