ElementUI el-step步骤条实现上一步功能

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

回撤到上一步效果 

element el-steps步骤条踩坑与点击事件（一）