按钮如何控制tab页面跳转

element UI 同时被 2 个专栏收录
28 篇文章 0 订阅
56 篇文章 1 订阅

按钮控制tab跳转:想通过按钮来控制tab切换,并触发事件,进而获得相应的数据
图一:
在这里插入图片描述图二:
在这里插入图片描述操作效果介绍:图片为el-tab-pane页面,由图一可看到当前所在**工区tab页面,点击添加工点**,页面从工区自动跳转之工点tab页面
实现:相信大家都知道,el-tabs中有一个属性:activaNameel-element官方文档给的是activaName=‘first’,实际其还可以为string的1、2、3、、、、例:activaName= '1',该属性还需在data中定义下和设置默认值,然后在按钮的地方设置事件,在事件中写入this.activaName = '2'这样就可以了,点击按钮时tab页面就自动跳转。如果要加接口事件的话,直接加到按钮事件中就可以啦。

代码
在这里插入图片描述
这里的@tab-click="handleClick"不用管,就是一个点击触发事件,这里我主要说的是按钮控制tab页面跳转,接下来是在data中定义和设置默认值:
在这里插入图片描述
接下来就是最重要的一步也是最后一步,按钮事件,这设置this.activaName = '3',这样就实现了。当点击按钮时,页面就会自动跳转到name=‘3’页面
在这里插入图片描述

  • 0
    点赞
  • 2
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值