我就廢話不多說(shuō)了，大家還是直接看代碼吧~

.vue

<van-tabs v-model='activeTab'> <van-tab v-if='isShow'></van-tab> <van-tab></van-tab></van-tabs>

.ts

private activeTab = 0;

private isShow = false;

補(bǔ)充知識(shí)：vue elui 使用v-if 判斷tab時(shí)樣式錯(cuò)亂

項(xiàng)目中用el ui 的tab顯示數(shù)據(jù)

6個(gè)數(shù)組的數(shù)據(jù)不同 所以用了 v-if 來(lái)判斷

但是同樣的數(shù)據(jù)，顯示出來(lái)的樣式亂七八糟

查了半天才知道 是因?yàn)闆]有加上 key值，所以才會(huì)渲染錯(cuò)亂。具體原因也不知道。

只要在table 加上key 就可以了

<el-table v-if='personalType==’publicNumber’' :data='publicNumberArray' key='publicNumber' >

vue的循環(huán)也是，如果不加上 絕對(duì)不同的key 可能就會(huì)出 .length 錯(cuò)誤或者 一些簡(jiǎn)單的數(shù)組錯(cuò)誤

還不放心，也可以給key加一個(gè) 隨機(jī)數(shù) 就可以了

key='Math.random()'

以上這篇Vue 根據(jù)條件判斷van-tab的顯示方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。