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

最新推荐文章于 2024-04-08 15:16:50 发布

九龙长廊_富贵呱呱

最新推荐文章于 2024-04-08 15:16:50 发布

阅读量2.4k

点赞数 2

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/m0_72663698/article/details/132148016

版权

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


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

对应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博客