今天在編寫(xiě)vue的時(shí)候用到了el-tabs，然后遇到切換的時(shí)候，在次打開(kāi)el-dialog還是上次的狀態(tài)（因?yàn)閮纱未蜷_(kāi)的el-tab-pane數(shù)量不一樣，就出現(xiàn)了問(wèn)題）

如下：

第一次打開(kāi)時(shí)的狀態(tài)，打開(kāi)到第二次的時(shí)候

解決方法

給el-tab-pane命名

<el-tabs type='border-card' v-model='activeName' ></el-tabs>

在script中

data() { return { isShow: ’’, activeName:’second’ } },

在每次關(guān)閉彈框的時(shí)候，在關(guān)閉方法中重置activeName

activeName=’second’

補(bǔ)充知識(shí)：vue + element-ui 制作tab切換（切換vue組件，踩坑總結(jié)）

項(xiàng)目中用到了一個(gè)頁(yè)面要實(shí)現(xiàn)tab切換實(shí)現(xiàn)報(bào)表展示，自行百度了一下；最后實(shí)現(xiàn)效果，在這里把步驟分享給大家！

創(chuàng)建文件：

tabZujian.vue

<template> <div class='tabZujian'> <el-tabs v-model='activeName'> <el-tab-pane label='tab1' name='first' :key='’first’'><child1></child1> </el-tab-pane><el-tab-pane label='tab2' name='second' :key='’second’'><child2></child2></el-tab-pane> </el-tabs> </div></template> <script>import tabZujianChild1 from ’@/tabComponents/tabZujianChild1’import tabZujianChild2 from ’@/tabComponents/tabZujianChild2’export default { name: ’tabZujian’, components:{ child1:tabZujianChild1, child2:tabZujianChild2 }, data() { return { //默認(rèn)第一個(gè)選項(xiàng)卡 activeName: 'first', } }, mounted(){ }}</script>

tabZujianChild1.vue

<template> <div class='child1'> 我是第一個(gè)自組件 </div></template><script> export default { name: ’child1’, mounted(){ console.log('tab1組件') } }</script>

tabZujianChild2.vue

<template> <div class='child2'> 我是第二個(gè)子組件 </div></template> <script> export default { name: ’child1’, mounted(){ console.log('tab2組件') } }</script>

問(wèn)題解決：

其實(shí)這個(gè)問(wèn)題解決起來(lái)非常簡(jiǎn)單，我們想要的是每次切換tab都能夠讓對(duì)應(yīng)的tab子組件進(jìn)行重新渲染。

初始化兩個(gè)變量 isChildUpdate1:true，isChildUpdate2:false；

使用v-if控制child1和child2是否渲染。

每次切換tab選項(xiàng)的時(shí)候，觸發(fā)事件。讓當(dāng)前點(diǎn)擊的tab變量設(shè)置位true，讓當(dāng)前組件重新渲染。

這時(shí)候當(dāng)你來(lái)回切換的時(shí)候，通過(guò)v-if判斷是否重新渲染當(dāng)前組件

更改一下tabZujian.vue

<template> <div class='tabZujian'><el-tabs v-model='activeName' @tab-click='handleClick'> <el-tab-pane label='tab1' name='first' :key='’first’'><child1 v-if='isChildUpdate1'></child1> </el-tab-pane><el-tab-pane label='tab2' name='second' :key='’second’'><child2 v-if='isChildUpdate2'></child2></el-tab-pane> </el-tabs> </div></template> <script>import tabZujianChild1 from ’@/tabComponents/tabZujianChild1’import tabZujianChild2 from ’@/tabComponents/tabZujianChild2’export default { name: ’tabZujian’, components:{ child1:tabZujianChild1, child2:tabZujianChild2 }, data() { return { //默認(rèn)第一個(gè)選項(xiàng)卡 activeName: 'first', isChildUpdate1:true, isChildUpdate2:false } }, mounted(){ }, methods:{ handleClick(tab) { if(tab.name == 'first') {this.isChildUpdate1 = true;this.isChildUpdate2 = false; } else if(tab.name == 'second') {this.isChildUpdate1 = false;this.isChildUpdate2 = true; } } }}</script>

最后成功了。

以上這篇解決vue中el-tab-pane切換的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。