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步骤条踩坑与点击事件（一） 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/11203.html