vue3 n-tab-pane 切换保持位置

在 Vue3 中，`n-tab-pane` 组件需要使用 `el-tabs` 组件进行包裹，而在 `el-tabs` 中可以使用 `v-model` 绑定选中的选项卡，然后可以通过监听 `change` 事件来获取当前选项卡的位置。因此，在 Vue3 中实现 `n-tab-pane` 切换时保持原来位置的功能，可以按照以下步骤进行：

1. 在 `el-tabs` 组件上添加 `v-model` 绑定选中的选项卡，并绑定一个变量，例如：

   <el-tabs v-model="activeTab">

2. 在组件的 `mounted` 生命周期中，读取并记录当前选项卡的位置，例如：

   mounted() {
     // 读取当前选项卡的位置
     const position = sessionStorage.getItem(`tab${this.activeTab}Position`);
     // 如果有位置记录，则滚动到相应位置
     if (position) {
       this.$nextTick(() => {
         const tab = this.$refs[`tab${this.activeTab}`];
         tab.$el.scrollTop = position;
       });
     }
   }

3. 在组件的 `activated` 生命周期中，重新设置当前选项卡的位置，例如：

   activated() {
     // 读取之前记录的位置
     const position = sessionStorage.getItem(`tab${this.activeTab}Position`);
     // 如果有位置记录，则滚动到相应位置
     if (position) {
       this.$nextTick(() => {
         const tab = this.$refs[`tab${this.activeTab}`];
         tab.$el.scrollTop = position;
       });
     }
   }

4. 在 `el-tabs` 组件上添加 `change` 事件监听，例如：

   <el-tabs v-model="activeTab" @change="handleChangeTab">

5. 在组件中定义 `handleChangeTab` 函数，用于记录当前选项卡的位置，例如：

   handleChangeTab() {
     // 记录当前选项卡的位置
     sessionStorage.setItem(`tab${this.activeTab}Position`, this.$refs[`tab${this.activeTab}`].$el.scrollTop);
   }

通过以上步骤，就可以实现 `n-tab-pane` 切换时保持原来位置的功能了。需要注意的是，以上代码中的 `tab` 和 `activeTab` 都需要根据实际情况进行修改。