ElementUI之steps步骤条实现点击跳转

为 el–step 添加 @click.native 属性，实现点击跳转：

<el-steps :active="active" finish-status="success" align-center>
    &lt;el-step @click.native="on_click(0)" title="步骤 1"&gt;</el-step&gt;
    <el-step @click.native="on_click(1)" title="步骤 2"&gt;</el-step&gt;
    <el-step @click.native="on_click(2)" title="步骤 3"&gt;</el-step&gt;
    <el-step @click.native="on_click(3)" title="步骤 4"&gt;</el-step&gt;
</el-steps&gt;

对应js：

export default {
    data() {
      return {
        active: 0
      };
    },
 
    methods: {
      // 步骤条
    on_click(e){
      console.log(e);
      if(e != "" || e != null){ this.active = e }
      }
    }
  }

下面是vue3的语法

‘.native‘ 修饰符在vue3中被弃用了

解决方法：把 ‘.native‘ 换成 ‘.enter‘

原文地址（若侵删）：ElementUI之steps步骤条实现点击跳转，解决‘.native‘ modifier on ‘v-on‘ directive is deprecated问题_el-steps 跳过步骤_urnotzkey的博客-CSDN博客

代码007普通

打赏 收藏 海报 链接