elementui中的tab标签通过某一页的按钮进行跳转、切换到不同的tab标题

最新推荐文章于 2025-10-09 11:22:54 发布

原创最新推荐文章于 2025-10-09 11:22:54 发布 · 5.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

博客介绍了使用ElementUI实现Tab页切换的方法。需在tab标题添加name属性，在el-tabs里绑定该属性值，在data中写入属性用于判断跳转，默认展示第一页tab内容可通过el-tab-pane的name绑定，还可编写方法实现切换。

1、首先就是需要在你的tab标题添加一个name属性，用字符串的数字比较方便

2、在el-tabs这个里面绑定这个属性值

3、data里面写上这个属性，将来就是通过这个进行判断跳转的

这里默认是“1”就是默认展示第一页的tab内容，就是通过每一个el-tab-pane的name进行的特定的绑定。

4、这里写一个方法来进行tab页的切换，当然了可以根据不同的需求来，重点代码是

 this.activeName = Number(this.activeName) + 2 + '';

   // 门诊点击指标跳转到详情页
    goEveryCheck_out(date, value) {
      // 接受子组件传递的数据
      this.selectDate = date;
      this.selectValue = value;
      // console.log('3' + msg);
      this.activeName = Number(this.activeName) + 2 + '';
    },