VUE Tabs 异步加载/重新加载
今天遇到一个问题,前端使用Vue Tab 主件时,如果使用主件引入方式,则加载会一次加载,也就是说向后台请求可能是好多个,因为每个Tab都会有请求后台的数据,假设用户进入只看一个Tab 那么其他的Tab应该不加载,这样能减轻后台压力,也能有刷新的功能,不是挺好;
搞了半天自己通过网上的一些例子,然后做了一些优化.代码如下,高手勿喷^^
<template>
<div class="containerPadding">
<div class="wrap-container mn">
<el-tabs v-model="activeTab" type="card" @tab-click="tabClick">
<el-tab-pane label="设备录入" name="add">
<span slot="label">
<i class="icon-qidongxiangfenxi"></i> 设备管理
</span>
<baseDeviceManager v-if="addIs"></baseDeviceManager>
</el-tab-pane>
<el-tab-pane label="设备授权" name="bind">
<span slot="label">
<i class="icon-qidongxiangfenxi"></i> 设备授权
</span>
<bindDeviceManager v-if="bindIs"></bindDeviceManager>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<style>
.mn .el-tabs__content {
height: 80vh;
}
.mn .ue-menu-right {
top: 0;
}
</style>
<script>
import baseDeviceManager from "@/components/terminal/baseDeviceManager";
import bindDeviceManager from "@/components/terminal/bindDeviceManager";
export default {
components: {
baseDeviceManager,
bindDeviceManager
},
data() {
return {
/*定义当前活动Tab */
activeTab: 'add',
/*定义前一个活动Tab,初始化默认为 ActiveTab */
oldTab: 'add',
/*定义Tab是否加载-第一个默认加载 */
addIs: true,
bindIs: false
};
},
methods: {
tabClick(tab, event) {
this[tab.name + "Is"] = true;
/**
* 这里是为了解决如果有多个Tab,那么就需要每次都判断,代码量太多
* 所以定义了一个固定的规则,就是在tabName后追加一个固定字段
* 定义v-if属性true/false
* oldTab是为了记录上一个打开的Tab 这样每次只需要把上次的那个tab关闭就行
* 这时候,只需要在data中定义特定的***Is 属性即可
*/
this[this.oldTab + "Is"] = false;
this.oldTab = tab.name;
}
}
}
</script>