Steps 步骤条

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

基础用法

简单的步骤条。

设置active属性，接受一个Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置space属性即可，它接受Boolean，单位为px，如果不设置，则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。

 1 <el-steps :active="active" finish-status="success">
 2   <el-step title="步骤 1"></el-step>
 3   <el-step title="步骤 2"></el-step>
 4   <el-step title="步骤 3"></el-step>
 5 </el-steps>
 6 
 7 <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
 8 
 9 <script>
10   export default {
11     data() {
12       return {
13         active: 0
14       };
15     },
16 
17     methods: {
18       next() {
19         if (this.active++ > 2) this.active = 0;
20       }
21     }
22   }
23 </script>

View Code