首先看代码:

<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,组件里的接口只请求一次。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐