在使用iview-admin的tab标签时,有时tab子组件过多,初次加载将全部页面都刷新,导致用户体验过差,因此使用v-if
来实现父组件里面tab切换子组件,每次切换只加载当前选中的子组件。如下例:
1 给Tabs增加点击事件,给子Panel增加name标识,给子组件增加v-if标签,代表选中时才加载。
<Tabs @on-click="clickTab">
<TabPane label="文档" name="2" icon="md-document">
<tabone v-if="type === '2'"></tabone>
</TabPane>
<TabPane label="里程碑" name="3" icon="md-pulse">
<tabtwo v-if="type === '3'"></tabtwo>
</TabPane>
</Tabs>
2 设置默认打开的Panel
data () {
return {
type: '1',
}
},
3 当点击事件触发时,切换Panel,即可实现每次切换只加载当前选中的子组件
clickTab (name) {
this.type = name
},