ElementUI el-step步骤条实现上一步功能
程序员文章站
2022-03-04 11:11:20
...
-
active:设置当前**步骤
-
@click.native:绑定步骤条的点击事件
<template>
<div id="Design">
<el-steps :active="active" align-center finish-status="success" process-status="wait" class="m-b-10">
<el-step v-for="(item,index) in titleList" :title="item.title" :key="index" @click.native="stepChange(index+1)"></el-step>
</el-steps>
</el-row>
<el-col :span="12" :offset="6" v-if="active==1">
步骤条1
</el-col>
<el-col :span="12" :offset="6" v-if="active==2">
步骤条2
</el-col>
<el-col :span="12" :offset="6" v-if="active==3">
步骤条3
</el-col>
<el-col :span="12" :offset="6" v-if="active==4">
步骤条4
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data(){
return{
active: 1,
titleList:[{
title:'设计方案1',
},{
title:'设计方案2',
},{
title:'设计方案3',
},{
title:'设计方案4',
},]
}
},
methods: {
// 步骤条上一步
stepChange(current){
if(current<this.active){
this.active=current
}
},
}
}
</script>
回撤到上一步效果
上一篇: php怎么关闭warning