element-ui tabs切换时，不打印console.log

        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
      }
    }
}

参考地址