elementUI中el-tabs组件接口多次请求解决方案

首先看代码：

<template>
	<el-tabs v-model="activeName" type="card">
	    <el-tab-pane :label="item.title" :name="item.value" v-for="(item,index) in tabList" :key="index">
	        <DomesTic v-if="activeName === '1'"></DomesTic>
	        <InTransit v-if="activeName === '2'"></InTransit>
	        <Total v-if="activeName === '3'"></Total>
	    </el-tab-pane>
	</el-tabs>
</template>
<script>
import DomesTic from './components/Domestic' //国内
import InTransit from './components/In-transit' //在途
import Total from './components/Total'
export default {
    name: "InventoryManagement",
    components:{DomesTic,InTransit,Total},
    data() {
        return {
            activeName: '1',
            tabList: [
                {title: '国内',value: '1'},
                {title: '在途',value: '2'},
                {title: '总',value: '3'}],
        };
    },
}
</script>

造成结果：

解决方案：
我的思路是给每一个tab给一个属性active，点击那个tab就让对应的 active 为 true ,其他为 false。具体代码如下：

//DOM
<el-tabs v-model="activeName" type="card" @tab-click="tabClick">
    <el-tab-pane :label="item.title" :name="item.value" v-for="(item,index) in tabList" :key="index">
        <DomesTic v-if="item.active && activeName === '1'"></DomesTic>
        <InTransit v-if="item.active && activeName === '2'"></InTransit>
        <Total v-if="item.active && activeName === '3'"></Total>
    </el-tab-pane>
</el-tabs>
//JS
<script>
import DomesTic from './components/Domestic' //国内
import InTransit from './components/In-transit' //在途
import Total from './components/Total'
export default {
    name: "InventoryManagement",
    components:{DomesTic,InTransit,Total},
    data() {
        return {
            activeName: '1',
            tabList: [
                {title: '国内',value: '1',active: true}, //页面初始化第一个tab为true
                {title: '在途',value: '2',active: false},
                {title: '总',value: '3',active: false}],
        };
    },
    methods: {
        tabClick(tab){
            this.tabList.map((v,i)=>{return v.active = Number(tab.index) === i})
        }
    }
}
</script>

最后看看成果：

点击对应的tab，组件里的接口只请求一次。