elementui steps
Element UI Steps 组件使用指南
Element UI 的 Steps 组件用于展示步骤流程，常用于表单分步、任务进度跟踪等场景。以下是具体使用方法及关键特性。
基础用法
使用 el-steps 标签包裹多个 el-step 子项，通过 active 属性控制当前步骤：
<el-steps :active="activeStep">
<el-step title="步骤1"></el-step>
<el-step title="步骤2"></el-step>
<el-step title="步骤3"></el-step>
</el-steps>数据部分需定义 activeStep 变量：
data() {
return {
activeStep: 0 // 默认从第一步开始
}
}状态与图标
可通过 status 属性设置步骤状态（wait/process/finish/error），或自定义图标：
<el-step title="验证" icon="el-icon-check" status="finish"></el-step>
<el-step title="支付" icon="el-icon-money" status="error"></el-step>垂直布局
添加 direction 属性实现垂直方向排列：
<el-steps direction="vertical" :active="1">
<el-step title="上传文件"></el-step>
<el-step title="提交审核"></el-step>
</el-steps>描述信息
在 el-step 中添加 description 插槽可显示辅助文字：
<el-step title="部署">
<template #description>
<span>将代码发布至生产环境</span>
</template>
</el-step>步骤切换控制
结合按钮动态调整 active 值实现流程控制：
methods: {
nextStep() {
if (this.activeStep++ > 2) return
},
prevStep() {
if (this.activeStep-- < 0) return
}
}样式定制
通过全局 CSS 覆盖或组件属性调整样式：
.el-step__head.is-process {
color: #ff0000; /* 当前步骤标题颜色 */
}注意事项
- 步骤索引从
0开始计数 - 动态步骤需用
v-for循环生成el-step - 复杂场景可配合
el-step的status插槽完全自定义状态显示
