一、問題描述

1、代碼類似下圖，某個頁面使用了Tab標籤頁，每個標籤頁對應一個組件（小頁面）

圖1

2、比如説AAA組件中使用了echarts中的某個圖表，初始狀態下正常顯示，效果如下

圖2

3、現在有個新需求，我要新加一個FFF組件，然後弄個類似的圖表。於是我從AAA組件中複製一個一模一樣的圖表，結果頁面初始化時圖表寬度異常，如下

圖3

就很離譜，然後我把AAA組件的代碼原封不動地拷貝一份作為FFF組件，結果還是異常，寬度始終是100px。邪門！我不是專業前端，同時也是初次使用Ant Design Vue框架，所以百思不得其解。

一開始我以為是引入的圖表組件有問題，但是根本找不到100px是哪來的，問AI，百度搜索之類的都沒能得到我想要的結果。直到我靈機一動，我把AAA和FFF組件的v-show判斷條件換了一下，神奇的事情發生了，原本FFF組件的圖表正常了，但是AAA組件的圖表異常了。這時我意識到，是<a-tabs>這一塊代碼有問題，我找到解決問題的方向了。

二、解決方案

1、第一種：換成官網提供的寫法。a-tab-pane都寫在a-tabs裏面。

<a-tabs v-model="tab" class="jy-bg">
      <a-tab-pane :tab="tabs[0].name" :key="0">
        <AAA @asset="clearAsset"/>
      </a-tab-pane>
      <a-tab-pane :tab="tabs[1].name" :key="1">
        <BBB @asset="clearAsset"/>
      </a-tab-pane>
      <a-tab-pane :tab="tabs[2].name" :key="2">
        <CCC @asset="clearAsset"/>
      </a-tab-pane>
      <a-tab-pane :tab="tabs[3].name" :key="3">
        <DDD @asset="clearAsset"/>
      </a-tab-pane>
      <a-tab-pane :tab="tabs[4].name" :key="4">
        <EEE @asset="clearAsset"/>
      </a-tab-pane>
      <a-tab-pane :tab="tabs[5].name" :key="5">
        <FFF :cname="true" @asset="clearAsset"/>
      </a-tab-pane>
 </a-tabs>

2、第二種：v-show統一換成v-if。

v-show：元素始終會被渲染，只是通過CSS的display屬性來控制顯隱。這意味着所有組件在頁面加載時就被初始化了，包括那些隱藏的組件。

v-if：只有條件為true時，元素才會被渲染到DOM中。當條件為false時，元素會被完全移除。

當使用v-show時，所有圖表組件在初始化時都被渲染了，但是被隱藏的組件容器寬度為0或未正確計算。比如tab初始值為0，所以下標為0的Tab標籤頁中AAA組件正常展示，其他Tab標籤頁組件被隱藏.

ECharts圖表在初始化時會根據容器的當前尺寸來設置canvas大小，如果容器寬度為0，圖表就會使用默認的最小寬度（通常是100px）。

當切換到這些隱藏的tab時，雖然容器變得可見了，但圖表的canvas尺寸已經被固定為100px。

最後，還是建議大家寫代碼能走心的一點，按照標準的寫法就很難會出現這一類奇怪的問題，更何況人家官網提供了例子。

這代碼誰寫的，真想給你梆梆兩拳！