vue实现选项卡分页

Vue实现选项卡分页的方法

使用动态组件切换

通过Vue的<component :is="currentTab">动态加载不同组件，结合v-for循环渲染选项卡标题，点击时切换currentTab的值。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.name"
        @click="currentTab = tab.component"
        :class="{ active: currentTab === tab.component }"
      >
        {{ tab.name }}
      </button>
    </div>
    <component :is="currentTab" />
  </div>
</template>

<script>
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'

export default {
  components: { Tab1, Tab2 },
  data() {
    return {
      currentTab: 'Tab1',
      tabs: [
        { name: 'Tab 1', component: 'Tab1' },
        { name: 'Tab 2', component: 'Tab2' }
      ]
    }
  }
}
</script>

结合路由实现

在Vue Router中配置嵌套路由，通过<router-view>显示不同选项卡内容，利用router-link或编程式导航切换。

// router.js
const routes = [
  {
    path: '/tabs',
    component: TabsContainer,
    children: [
      { path: 'tab1', component: Tab1 },
      { path: 'tab2', component: Tab2 }
    ]
  }
]

<!-- TabsContainer.vue -->
<template>
  <div>
    <router-link to="/tabs/tab1">Tab 1</router-link>
    <router-link to="/tabs/tab2">Tab 2</router-link>
    <router-view></router-view>
  </div>
</template>

使用第三方库

Element UI或Ant Design Vue等UI库提供现成的Tabs组件，可快速实现带分页的选项卡功能。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="用户管理" name="users">
      <UserTable />
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="config">
      <ConfigPanel />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'users'
    }
  }
}
</script>

实现选项卡内容分页

组件内部分页

在每个选项卡组件内部实现独立的分页逻辑，通过currentPage和pageSize控制数据展示。

<template>
  <div>
    <table><!-- 数据展示 --></table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 100
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  }
}
</script>

保持选项卡状态

使用<keep-alive>缓存非活跃选项卡的组件状态，避免切换时重复请求数据或丢失分页状态。

<keep-alive>
  <component :is="currentTab" />
</keep-alive>

路由参数同步

在路由实现的选项卡中，通过查询参数同步分页状态，便于直接分享带分页的链接。

this.$router.push({
  path: '/tabs/tab1',
  query: { page: this.currentPage }
})