vue3+ts+elementUI el-tabs切换时保留数据

在Vue 3中，可以通过使用`keep-alive`组件来缓存动态组件的状态。当使用`keep-alive`包裹一个组件时，该组件将不被销毁，而是被缓存起来。当该组件再次被渲染时，它将从缓存中恢复，而不是重新创建。这可以帮助我们在组件之间切换时保留数据。

对于ElementUI的`el-tabs`组件，我们可以将每个标签页对应的组件包裹在`keep-alive`中，以便在切换标签时缓存组件的状态。以下是一个示例：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">
      <keep-alive>
        <component :is="currentTab.component"></component>
      </keep-alive>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      <keep-alive>
        <component :is="currentTab.component"></component>
      </keep-alive>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';

export default defineComponent({
  components: {
    Tab1,
    Tab2,
  },
  data() {
    return {
      activeTab: 'tab1',
      tabs: [
        { label: 'Tab 1', name: 'tab1', component: Tab1 },
        { label: 'Tab 2', name: 'tab2', component: Tab2 },
      ],
    };
  },
  computed: {
    currentTab() {
      return this.tabs.find((tab) => tab.name === this.activeTab);
    },
  },
});
</script>

在上面的示例中，我们使用了一个`tabs`数组来存储每个标签页的信息，包括标签页的名称、标签页的标签文本和对应的组件。通过计算属性`currentTab`，我们可以获取当前选中的标签页对应的组件。在`el-tab-pane`中，我们将该组件包裹在`keep-alive`中，以便在切换标签时缓存组件的状态。

需要注意的是，如果标签页中的组件有自己的状态，我们需要确保在组件被销毁前将其保存下来，以便在组件被恢复时能够重新渲染出正确的状态。可以通过在组件的`beforeUnmount`钩子中保存状态，在组件的`activated`钩子中恢复状态来实现。