elementUI中el-tabs组件接口多次请求解决方案
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
首先看代码:
<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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)