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

elementui流程

2026-01-13 21:21:21前端教程

Element UI 流程设计

Element UI 提供了一套基于 Vue.js 的流程设计组件，适用于展示步骤流程、任务进度等场景。以下为关键实现方法和组件说明：

安装与引入 确保已安装 Element UI 并正确引入 Steps 组件：

import { Steps, Step } from 'element-ui';
Vue.use(Steps);
Vue.use(Step);

基础流程步骤

使用 el-steps 和 el-step 组件构建基础流程：

<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>

active 属性绑定当前激活步骤的索引（从 0 开始）
finish-status 定义完成状态样式（可选 success/error/wait）

流程状态控制

通过数据驱动控制流程状态：

data() {
  return {
    activeStep: 0 // 初始步骤
  };
},
methods: {
  nextStep() {
    if (this.activeStep++ > 2) this.activeStep = 0;
  }
}

竖向流程布局

添加 direction 属性实现垂直布局：

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

自定义样式

通过插槽和属性定制化显示：

<el-step title="定制步骤">
  <template #icon>
    <i class="el-icon-user"></i>
  </template>
</el-step>

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

复杂流程示例

结合表单验证的完整流程案例：

<el-steps :active="active" simple>
  <el-step title="填写信息" icon="el-icon-edit"></el-step>
  <el-step title="确认订单" icon="el-icon-upload"></el-step>
</el-steps>

<div v-show="active===0">
  <!-- 表单内容 -->
</div>
<el-button @click="active=1">下一步</el-button>

注意事项：