Vue Tab栏显示顺序混乱（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>