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

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

### 一、业务需求 ###

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

如图

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

![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绑定的值改成你想要显示的那<el-tab-pane>的name值 ###

![2019022217273749.png][]

关键点：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX3h1bg_size_16_color_FFFFFF_t_70 2][]

我的提货单<el-tab-pane>

![20190222173356756.png][]

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

![20190222173120425.png][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX3h1bg_size_16_color_FFFFFF_t_70]: /images/20220317/6a4c31d9064248349d74adf99e0ea1b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX3h1bg_size_16_color_FFFFFF_t_70 1]: /images/20220317/ee1cf0a37ed142e696fe210f76ecdff3.png
[2019022217273749.png]: /images/20220317/d3279acc0559482f85a41d3d99a99070.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX3h1bg_size_16_color_FFFFFF_t_70 2]: /images/20220317/6c6dbe65befb411ca3851954c01e1857.png
[20190222173356756.png]: /images/20220317/d982e6b068694ad5a4b0c4dcb5b5263b.png
[20190222173120425.png]: /images/20220317/1a651671157d4ca5bec04cbbe226aef0.png