vue3+ts+elementUI el-tabs切换时缓存数据

如果您希望在切换 el-tabs 时缓存数据，可以使用 keep-alive 组件将需要缓存的组件包裹起来，这样即使切换到其他 tab，组件的状态也会被保留。另外，您还可以使用 activated 和 deactivated 钩子函数来监听组件被激活和失活的事件，在这些钩子函数中进行数据的加载和清除操作。

具体实现方法如下：

1. 在需要缓存的组件外面包裹一个 keep-alive 组件：

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>

2. 在需要缓存的组件中使用 activated 和 deactivated 钩子函数：

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'CachedComponent',
  data() {
    return {
      cachedData: '',
    };
  },
  activated() {
    // 组件被激活时加载数据
    this.cachedData = localStorage.getItem('cachedData');
  },
  deactivated() {
    // 组件失活时清除数据
    this.cachedData = '';
    localStorage.removeItem('cachedData');
  },
});
</script>

在上面的例子中，我们通过 localStorage 来保存和清除数据，您也可以使用其他的方式来实现。