欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

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

回撤到上一步效果 

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

element el-steps步骤条踩坑与点击事件(一) 

相关标签: ElementUI