el-tabs切换页面 分页还保留着上个页面的选项

在Vue.js的Element UI库中，`el-tabs`组件用于创建选项卡页切换功能。如果同时需要分页并保留上一个页面的选项，通常会在每个选项卡内部嵌套分页组件，例如`el-pagination`。当你在`el-tabs`切换页面时，每个分页组件会保持它所属选项卡之前的状态。

设置方法如下：

1. 创建一个包含`el-tabs`和`el-pagination`的结构，比如：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.title">
      <p>这是{{ item.title }}的内容</p>
      <el-pagination :current-page.sync="currentPage[item.key]" :total="item.total" @current-change="changePage(item.key)"></el-pagination>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: 'tab1', total: 100 },
        { title: 'tab2', total: 200 }
      ]
    };
  },
  methods: {
    changePage(key) {
      this.currentPage[key] = arguments[0];
    }
  },
  // 这里假设currentPage是一个对象，存储每个选项卡的当前页数
  computed: {
    currentPage: {
      get() {
        return this.$store.state.currentPage || {};
      },
      set(newVal) {
        this.$store.commit('updateCurrentPage', newVal);
      }
    }
  }
};
</script>

在这个例子中，`currentPage`通过Vuex管理状态，每次分页时都会更新对应的选项卡页数。当切换到新的选项卡时，旧选项卡的分页状态会被保留。