Vue el-tabs使用 keep-alive 不生效

1、首先在需要缓存的组件中设置name

2、不要在el-tabs里去调用keep-alive 数据的接口，这样肯定会每次点击tab都调用，在组件的       mouted生命周期里面单独调用接口

上代码

HTML

      <div class="activity">
         <div class="cont">
            <el-tabs
              v-if="search && search.length > 0"
              v-model="first"
              @tab-click="handleClick"
            >
               <el-tab-pane
            v-for="(item, index) in search"
            :key="index"
            :label="item.name"
            :name="item.id"
            :lazy="true"
            >
              </el-tab-pane>

    </el-tabs>
         </div>
      </div>
     <keep-alive>
     <ComponenReport :message="hello" :id="first" ref="child" :key="hello">
            
      </ComponenReport>
     </keep-alive>

注意：ComponentReport 是组件，如果按照这个方式改还是没有用的话，就在组件中加个key,这个key可以是随意的值

JS(不要在里面写调取数据的方法，将调取数据的方法写在组件的 mounted()里)

   // 查询具体方向报告
    handleClick(tab, event) {
      this.searchTitle = tab._props.label
      this.hello = tab._props.label
      this.first = tab._props.name
    },