elementui流程

ElementUI 流程组件

ElementUI 提供了 el-steps 组件用于展示流程步骤，支持横向和纵向布局，可自定义步骤状态、图标和样式。

基本用法

通过 active 属性控制当前步骤，finish-status 设置完成状态（默认为 success），align-center 实现居中对齐。

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

自定义图标

使用 icon 插槽或直接通过 icon 属性指定步骤图标。

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

步骤状态控制

通过 status 属性手动设置步骤状态（wait / process / finish / error）。

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

垂直布局

添加 direction 属性并设置为 vertical 实现纵向排列。

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

动态交互示例

结合按钮控制流程进度，通过修改 active 值实现步骤切换。

<template>
  <el-steps :active="active">
    <el-step v-for="(step, index) in steps" :key="index" :title="step.title"></el-step>
  </el-steps>
  <el-button @click="next">下一步</el-button>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      steps: [{ title: '步骤1' }, { title: '步骤2' }, { title: '步骤3' }]
    }
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    }
  }
}
</script>

样式自定义

通过 CSS 覆盖默认样式，例如修改步骤条颜色或图标大小。

.el-step__head.is-process {
  color: #ff0000;
  border-color: #ff0000;
}

注意事项

• 确保 active 值不超过步骤总数。
• 复杂场景可结合 Vue 路由实现步骤跳转。
• 移动端需测试横向布局的适应性，必要时改用纵向布局。