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

一、业务需求

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

如图

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

vue element tabs 点击链接切换选项卡_第1张图片

对应的提货单信息

vue element tabs 点击链接切换选项卡_第2张图片

二、代码实现

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

vue element tabs 点击链接切换选项卡_第3张图片

关键点:

vue element tabs 点击链接切换选项卡_第4张图片

我的提货单

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

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

你可能感兴趣的:(Java,web开发,Vue.js框架开发,JavaScript)