tabs标签页,默认一开始就加载所有tab页中的内容,但有时候tab较多,而我们只关注其中一两个tab,这样就造成了性能浪费。
所以,我们想 当点击对应tab时才渲染和调用对应接口
我们可以通过tab提供的事件,拿到当前点击tab的name,然后根据name来用v-if设置显示;
<template>
<Tabs @on-click="getTabName" value="generalSetup" name="setTab">
<TabPane label="通用设置" name="generalSetup" tab="setTab">
<general-setup v-if="flag === 'generalSetup'"></general-setup>
</TabPane>
<TabPane label="PC商城设置" name="pcMallsSetup" tab="setTab">
<pcMalls-setup v-if="flag === 'pcMallsSetup'"></pcMalls-setup>
</TabPane>
<TabPane label="移动商城设置" name="MobileSetup" tab="setTab">
<mobile-setup v-if="flag === 'MobileSetup'"></mobile-setup>
</TabPane>
<TabPane :label="$t('ShopSetUp.Text3')" name="businessSetup" tab="setTab">
<business-setup v-if="flag === 'businessSetup'"></business-setup>
</TabPane>
</Tabs>
</template>
<script>
import GeneralSetup from './components/GeneralSetup'
import PcMallsSetup from './components/PcMallsSetup'
import MobileSetup from './components/MobileSetup'
import BusinessSetup from './components/BusinessSetup'
import ServiceNote from './components/ServiceNote'
export default {
name: 'Index',
components: {
GeneralSetup,
PcMallsSetup,
MobileSetup,
},
data(){
return {
flag:"generalSetup"
}
},
methods:{
getTabName(data){
this.flag = data
}
},
}
</script>