当前位置：首页 > VUE

vue实现多个tab

2026-03-26 20:56:12VUE

Vue 实现多个 Tab 的方法

使用动态组件

在 Vue 中可以通过动态组件的方式实现多个 Tab。需要定义一个数组存储 Tab 内容，使用 v-for 渲染 Tab 标题，并通过 :is 动态切换组件。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab.component"
        :class="{ active: currentTab === tab.component }"
      >
        {{ tab.title }}
      </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: [
        { title: 'Tab 1', component: 'Tab1' },
        { title: 'Tab 2', component: 'Tab2' }
      ]
    }
  }
}
</script>

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

使用路由实现 Tab

如果 Tab 需要更复杂的导航功能，可以使用 Vue Router 实现。每个 Tab 对应一个路由路径。

vue实现多个tab

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

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

使用第三方库

对于更复杂的 Tab 功能，可以使用第三方库如 vue-tabs 或 element-ui 的 Tab 组件。

vue实现多个tab

安装 Element UI:

npm install element-ui

使用 Element UI 的 Tabs 组件:

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">Content 1</el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">Content 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>