當(dāng)我們在開發(fā)中遇到tab切換展懈，這時候用el的el-tabs感覺很方便
但當(dāng)我在把代碼都寫完后，發(fā)現(xiàn)一個問題就是頁面打開時
雖然我們只能看見當(dāng)前一個tab頁供璧，但是vue會幫你把你寫的所有tab頁的內(nèi)容都渲染出來了存崖，只是其他的隱藏了，同時其他tab的js也都走了一邊睡毒，當(dāng)你點擊tab時js就不會再去請求后臺
這種機制會造成一個問題来惧，就是如果每個tab頁的數(shù)據(jù)都過大的時候，可能就會導(dǎo)致首次打開頁面卡頓現(xiàn)象演顾，同時如果數(shù)據(jù)庫數(shù)據(jù)在實時發(fā)生變化的話供搀，比如你一分鐘前打開的這個頁面隅居，看的是tab1的內(nèi)容，看了1分鐘后我想看tab2的內(nèi)容葛虐，但此時tab2的內(nèi)容后臺數(shù)據(jù)庫已經(jīng)發(fā)生變化了军浆，你能看到的只是1分鐘前的數(shù)據(jù)，那該怎么解決這個問題呢挡闰？
首先一開始一次加載所有tab的代碼是這樣的↓
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane label="待處理" name="first"><processed/><!--這里是自定義的子模塊乒融，也就是自定義組件--></el-tab-pane>
<el-tab-pane label="已處理" name="second"><un-processed/></el-tab-pane>
</el-tabs>
這時候v-if的作用就可以發(fā)揮出來了，當(dāng)v-if的值為false時vue是不會去渲染該標(biāo)簽下的內(nèi)容的
那我們就把tabs下的子模塊標(biāo)簽上加v-if摄悯，一開始只設(shè)置其中一個為true其他都為false赞季，當(dāng)點擊tab切換時去改變v-if的值，代碼如下↓
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane label="待處理" name="first" :key="'first'">
<processed v-if="isFirst"/>
</el-tab-pane>
<el-tab-pane label="已處理" name="second" :key="'second'">
<un-processed v-if="isSecond"/>
</el-tab-pane>
</el-tabs>
js的代碼↓
import Breadcrumb from '@/components/Breadcrumb'
import Processed from './processed'
import UnProcessed from './unprocessed'
export default {
components: {
Breadcrumb,
Processed,
UnProcessed
},
data() {
return {
// 默認(rèn)第一個Tab
activeName: 'first',
isFirst: true,
isSecond: false
}
},
methods: {
handleClick(tab) {
if (tab.name === 'first') {
this.isFirst = true
this.isSecond = false
} else if (tab.name === 'second') {
this.isFirst = false
this.isSecond = true
}
}
}
}
這樣就可以完美解決上面的問題奢驯，首次加載頁面只會渲染其中一個tab的內(nèi)容申钩，同時點擊tab切換時頁面重新渲染頁面，good瘪阁！
