iview tab 组件设置当点击对应tab时才渲染和调用对应接口

 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>