Vue Tab栏显示顺序混乱（tab栏内容不显示）

原创已于 2022-04-14 17:22:03 修改 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

于 2022-04-14 17:18:34 首次发布

VUE 专栏收录该内容

30 篇文章

订阅专栏

在Vue中使用iview的Tab组件时遇到显示顺序混乱的问题，当某些TabPane通过v-if条件不显示时，重新显示所有TabPane会导致顺序错误。问题源于使用v-if与TabPane的渲染顺序有关。解决办法是在每个TabPane上添加:index属性并赋予递增数值，确保渲染顺序正确。通过设置index='1', '2', '3'，修复了Tab栏的显示顺序和内容缺失问题。

问题情况

在这里插入图片描述

代码

使用Vue的框架 iview

<Tabs type='card' v-model='activeName' @on-click='clickTabs'>
 <TabPane v-if="isNotNull(setup) " name="first" label="配置" >
   <temp ref="formData" :options="widgetOptions.setup"/>
 </TabPane>
 <TabPane v-if="isNotNull(data)" name="second" label="数据" >
   <temp ref="formData" :options="widgetOptions.data"/>
 </TabPane>
 <TabPane v-if="isNotNull(position)" name="third" label="坐标">
   <temp ref="formData" :options="widgetOptions.position" />
 </TabPane>
</Tabs>

原因

论述发生情况（相同的小伙伴可以进行尝试）

v-if均为true时是没有问题的，但当其中v-if=false,即某一tab栏从不显示时，显示还是没有问题的。当我执行另一操作，v-if均为true时，就发生了前面展示的问题

原因（官方文档：TabPane props）：
在 TabPane 使用 v-if 时，并不会按照预先的顺序渲染，这时可设置 index，并从小到大排序(需大于 0)

解决方案

<Tabs type='card' v-model='activeName' @on-click='clickTabs'>
 <TabPane v-if="isNotNull(setup) " name="first" label="配置" :index='1'>
   <temp ref="formData" :options="widgetOptions.setup"/>
 </TabPane>
 <TabPane v-if="isNotNull(data)" name="second" label="数据" :index='2'>
   <temp ref="formData" :options="widgetOptions.data"/>
 </TabPane>
 <TabPane v-if="isNotNull(position)" name="third" label="坐标" :index='3'>
   <temp ref="formData" :options="widgetOptions.position" />
 </TabPane>
</Tabs>