element-ui使用tabs后,发现tabs里面的组件在页面初始化的时候,全部打印出来了,后面点击切换的时候,将不会在打印对应组件的console.log
解决方法:
1.初始化变量isTopoUpdate:true,isServerInfo:true
2.用v-if控制控制tabs
3.每次切换tab时,让当前点击的tab变量设置为true,让当前组件重新渲染
这样,来回切换的时候,v-if就可以重新渲染当前组件了
代码结构如下图所示:
代码如下:
<template>
<div class="app-container">
<el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="tabClick">
<el-tab-pane label="xxxx概览" name="topo" >
<server-topo v-if="isTopoUpdate" ref="topoCanvas" :data-topo="dataTopo" :links="links" @updateActiveName="updateActiveName"></server-topo>
</el-tab-pane>
<el-tab-pane label="xxx详细信息" name="serverInfo">
<server-detail v-if="isServerInfoUpdate" ref="ServerDetail" :server-info-list="serverInfoList" @devId="updateDevId"/>
</el-tab-pane>
</el-tabs>
</div>
</template>
data() {
return {
// isTopoUpdate和isServerInfoUpdate解决tabs页面初始化时,把两个子组件全部初始化,后面点击切换时,数据不会重新加载的问题
isTopoUpdate: true,
isServerInfoUpdate: false
}
},
methods: {
tabClick(pane, event) {
if (pane.name == 'serverInfo') {
this.isServerInfoUpdate = true
this.isTopoUpdate = false
} else {
this.isServerInfoUpdate = false
this.isTopoUpdate = true
}
}
}