解決vue中el-tab-pane切換的問題
阿新 • • 發佈:2020-07-20
今天在編寫vue的時候用到了el-tabs,然後遇到切換的時候,在次開啟el-dialog還是上次的狀態(因為兩次開啟的el-tab-pane數量不一樣,就出現了問題)
如下:
第一次開啟時的狀態,開啟到第二次的時候
解決方法
給el-tab-pane命名
<el-tabs type="border-card" v-model="activeName" ></el-tabs>
在script中
data() { return { isShow: '',activeName:'second' } },
在每次關閉彈框的時候,在關閉方法中重置activeName
activeName='second'
補充知識:vue + element-ui 製作tab切換(切換vue元件,踩坑總結)
專案中用到了一個頁面要實現tab切換實現報表展示,自行百度了一下;最後實現效果,在這裡把步驟分享給大家!
建立檔案:
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 { //預設第一個選項卡 activeName: "first",} },mounted(){ } } </script>
tabZujianChild1.vue
<template> <div class="child1"> 我是第一個自元件 </div> </template> <script> export default { name: 'child1',mounted(){ console.log("tab1元件") } } </script>
tabZujianChild2.vue
<template> <div class="child2"> 我是第二個子元件 </div> </template> <script> export default { name: 'child1',mounted(){ console.log("tab2元件") } } </script>
問題解決:
其實這個問題解決起來非常簡單,我們想要的是每次切換tab都能夠讓對應的tab子元件進行重新渲染。
初始化兩個變數 isChildUpdate1:true,isChildUpdate2:false;
使用v-if控制child1和child2是否渲染。
每次切換tab選項的時候,觸發事件。讓當前點選的tab變數設定位true,讓當前元件重新渲染。
這時候當你來回切換的時候,通過v-if判斷是否重新渲染當前元件
更改一下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',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切換的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。