vue element组件之步骤条组件的应用

效果如下

代码如下

<template>
  <div class="body">
      <Head/>
    <div class="tbody">  
<el-steps :active="active" finish-status="success">
  <el-step title="个人信息"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>
<!-- 个人信息 -->
<div class="info" v-if="active==1">
我的信息
</div>
<div class="info" v-if="active==2">
我的步骤
</div>
<div class="info" v-if="active==3">
我的步骤222
</div>
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>  
<el-button style="margin-top: 12px;" @click="pre" v-if="active>1">上一步</el-button>  
</div>
      </div>
</template>
<style>
.tbody{
    width:80%;
    margin-left:10%;
    margin-top: 2%;

}
</style>
<script>
import Head from "../../components/common/Head";
  export default {
      components: {
    Head
  },
    data() {
      return {
        active: 1
      };
    },

    methods: {
      next() {
        if (this.active++ > 3) this.active = 1;
      },
       pre() {
        if (this.active-- < 2) this.active = 1;
      }
    }
  }
</script>