效果如下
代码如下
<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>