Ant Design Vue标签切换异常：切换后Transferred标签消失

问题原因 #

你给两个<a-tab-pane>都加了v-if判断，这会导致不满足条件的tab-pane被完全销毁。而Ant Design Vue的标签栏是由各个tab-pane的slot="tab"内容生成的，销毁tab-pane自然就会把对应的标签也删掉，所以切换后另一个标签就不见了。

解决方案 #

方案1：用v-show替换v-if #

v-show只是控制元素的显示/隐藏，不会销毁组件，这样两个tab-pane始终存在，标签栏的两个标签也会一直保留：

<a-tabs :current="current" @change="onChange">
    <a-tab-pane key="1" v-show="current === 0">
        <span slot="tab">
            <a-icon type="folder-open" theme="twoTone" /> Pending ({{ pendingCount }})
        </span>
        <pending-list @go-to-transferred="nextTab" @dataCount="updatePendingCount" />
    </a-tab-pane>

    <a-tab-pane key="2" v-show="current === 1">
        <span slot="tab"><a-icon type="folder" theme="twoTone" />Transferred </span>
        <done-list @transferCount="updateTransferCount" />
    </a-tab-pane>
</a-tabs>

方案2：把条件判断移到内部内容组件上 #

让两个tab-pane始终渲染，只控制内部的列表组件显示隐藏，这样标签栏也会一直完整：

<a-tabs :current="current" @change="onChange">
    <a-tab-pane key="1">
        <span slot="tab">
            <a-icon type="folder-open" theme="twoTone" /> Pending ({{ pendingCount }})
        </span>
        <pending-list v-if="current === 0" @go-to-transferred="nextTab" @dataCount="updatePendingCount" />
    </a-tab-pane>

    <a-tab-pane key="2">
        <span slot="tab"><a-icon type="folder" theme="twoTone" />Transferred </span>
        <done-list v-if="current === 1" @transferCount="updateTransferCount" />
    </a-tab-pane>
</a-tabs>

补充说明 #

两种方案都能解决问题，区别在于：

• v-show会渲染所有内容，只是隐藏不显示的部分，适合内容不复杂的场景；
• 移到内部组件的v-if会销毁不显示的列表组件，适合需要节省性能的场景。

内容的提问来源于stack exchange，提问作者themuaz97