elementui tabs下多个组件如何keepalive

Question

    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
        <keep-alive include="CompanyBaseForm,CompanyExecutiveForm">
          <base-tab-pane v-if="'Base'==item.key" :type="item.key" @create="showCreatedTimes" @baseFormData="extendsBaseForm"/>
          <executive-tab-pane v-if="'Executive'==item.key" :type="item.key" @create="showCreatedTimes" />
          <promoter-tab-pane v-if="'Promoter'==item.key" :type="item.key" @create="showCreatedTimes" />
          <topman-tab-pane v-if="'Topman'==item.key" :type="item.key" @create="showCreatedTimes" />
          <other-tab-pane v-if="'Other'==item.key" :type="item.key" @create="showCreatedTimes" />
          <fund-tab-pane v-if="'Fund'==item.key" :type="item.key" @create="showCreatedTimes" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>

当其中一个tab-pane中的连接跳转到/company/person页面时：

        let param={
            'category': 3,
            'unicodes': localStorage.unicodes,
            'mobile': this.mobile
        };
        this.$router.push({path:'/company/person', query: param})

我在penson中用go(-1)回退到tab-pane时,tab-pane刷新了

Answer 1

给你举个简短的例子，主要在于vue内置组件component;你代码中使用v-if是无法缓存的
https://cn.vuejs.org/v2/api/#component

在动态组件上使用 keep-alive

<template>
  <div>
    <el-tabs style="margin-top:15px;" type="border-card">
      <el-tab-pane
        v-for="item in tabMapOptions"
        :key="item.key"
        :label="item.label"
        :name="item.key"
      >
        <keep-alive>
          <component
            :is="item.key"
            :type="item.key"
            @create="showCreatedTimes"
            @baseFormData="extendsBaseForm"
          ></component>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import baseTabPane from "baseTabPane"; //实际的路径
import executiveTabPane from "executiveTabPane"; //实际的路径
export default {
  components: { baseTabPane, executiveTabPane },
  data() {
    return {
      tabMapOptions: [
        {
          key: "base-tab-pane", //需要与组件对应
          label: ""
        },
        {
          key: "executive-tab-pane", //需要与组件对应
          label: ""
        }
      ]
    };
  }
};
</script>