element 步驟條steps 點擊事件

 

element-UI的操作步驟steps每一項添加事件,比如click,hover

 

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