vue element tabs 点击链接切换选项卡

古城微笑少年丶 2022-03-17 06:06 1094阅读 0赞

一、业务需求

工作中，用到element UI的el-tabs组件，tabs里面有几个现在需要在第一个内容中点击某个内容，然后切换到其他选项卡中显示对应的内容

如图

我需要点击提货单编号后在第二个选项卡中显示对应的提货单信息

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX3h1bg_size_16_color_FFFFFF_t_70

对应的提货单信息

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX3h1bg_size_16_color_FFFFFF_t_70 1

二、代码实现

思路就是：在需要链接的地方添加事件（我在提货单处添加了事件），在事件中将组件el-tabs中v-model绑定的值改成你想要显示的那的name值

2019022217273749.png

关键点：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX3h1bg_size_16_color_FFFFFF_t_70 2

我的提货单

20190222173356756.png

在事件中改变el-tablev-model绑定的值（因为我要切换的选项卡内容是动态显示的，所以我的组件绑定了我的提货单号，以实现动态的显示对应的提货单信息）

20190222173120425.png

为了实现这个效果，花了不少时间找资料实现，现将实现过程记录下来，以便以后解决同样的问题。

发表评论

表情：
评论列表 （有 0 条评论，1094人围观）

还没有评论，来说两句吧...

相关阅读

    相关 tab选项卡

    tab选项卡 tab选项卡 tab选项卡可以说是一个可以在一个·规定的位置中可以嵌套多个页面或小页面，也可以说是一本笔记本可以有很多张纸，那么多纸都封装在笔记本里面，可以

    た 入场券た 入场券/ 0 赞/ 576 阅读