首页 > 其他 > 详细

element 步骤条steps 点击事件

时间:2020-06-19 18:41:01      阅读:405      评论:0      收藏:0      [点我收藏+]

 

 

<el-steps direction="vertical" :active="actives" finish-status="success" style="height: 500px; padding-top: 20px">
            <el-step @click.native="on_click(0)" title="产品基本信息"></el-step>
            <el-step @click.native="on_click(1)" title="产品参数设定"></el-step>
            <el-step @click.native="on_click(2)" title="产品费用设定"></el-step>
            <el-step @click.native="on_click(3)" title="适应范围-代理商设置"></el-step>
            <el-step @click.native="on_click(4)" title="适应范围-车辆设置"></el-step>
</el-steps>

 

data() {
    return {
      // 步骤条
      actives: 0,
   }
}

 

 methods: {

    // 步骤条
    on_click(e){
      console.log(e);
      if(e != ‘‘ || e != null){ this.actives = e }
    }

}

 

 

效果图:

 

技术分享图片

 

参考https://jsfiddle.net/1m6kkqgg/

element 步骤条steps 点击事件

原文:https://www.cnblogs.com/Antwan-Dmy/p/13164252.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!