当前位置：首页 > VUE

vue实现多个tab

2026-02-09 12:15:54VUE

Vue 实现多个 Tab 的方法

使用动态组件切换

通过 Vue 的 <component> 和 v-bind:is 动态切换组件实现 Tab 内容切换。定义一个数组存储 Tab 数据，使用 v-for 渲染 Tab 标题，通过点击事件切换当前显示的组件。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab.component"
        :class="{ active: currentTab === tab.component }"
      >
        {{ tab.name }}
      </button>
    </div>
    <component :is="currentTab"></component>
  </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>

<style>
.tabs button.active {
  background-color: #ddd;
}
</style>

使用 Vue Router 实现路由级 Tab

如果 Tab 需要独立的路由和状态管理，可以结合 Vue Router 实现。每个 Tab 对应一个路由路径，通过 <router-link> 导航。

<template>
  <div>
    <router-link 
      v-for="(tab, index) in tabs" 
      :key="index"
      :to="tab.path"
      active-class="active"
    >
      {{ tab.name }}
    </router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab 1', path: '/tab1' },
        { name: 'Tab 2', path: '/tab2' }
      ]
    };
  }
};
</script>

使用第三方库

对于更复杂的 Tab 需求（如动画、懒加载），可以使用第三方库如 vue-tabs-component 或 element-ui 的 Tab 组件。

安装 element-ui：

npm install element-ui

示例代码：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">
      Content for Tab 1
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      Content for Tab 2
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { Tabs, TabPane } from 'element-ui';

export default {
  components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane },
  data() {
    return {
      activeTab: 'tab1'
    };
  }
};
</script>