当前位置：首页 > VUE

vue 页签实现

2026-03-26 21:51:05VUE

Vue 页签实现方法

使用动态组件和 `v-for`

在 Vue 中可以通过动态组件结合 v-for 实现页签功能。定义一个数组存储页签信息，通过 v-for 渲染页签标题，点击时切换当前激活的组件。

vue 页签实现

<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" />
  </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: #ddd;
}
</style>

使用 `vue-router` 实现路由页签

如果页签需要与路由关联，可以通过 vue-router 的嵌套路由或动态路由实现。每个页签对应一个路由路径，切换页签时通过 router-link 导航。

vue 页签实现

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

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Home', path: '/' },
        { name: 'About', path: '/about' }
      ]
    }
  }
}
</script>

使用第三方库（如 `element-ui`）

UI 库如 element-ui 提供了现成的页签组件，可直接使用。

<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>
export default {
  data() {
    return {
      activeTab: 'tab1'
    }
  }
}
</script>

实现可关闭页签

通过动态管理页签数组，支持关闭页签功能。

<template>
  <div>
    <div class="tabs">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab.id"
        :class="{ active: currentTab === tab.id }"
      >
        {{ tab.name }}
        <span @click.stop="closeTab(index)">×</span>
      </div>
    </div>
    <div v-if="currentTab === 'tab1'">Content 1</div>
    <div v-else-if="currentTab === 'tab2'">Content 2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'tab1',
      tabs: [
        { id: 'tab1', name: 'Tab 1' },
        { id: 'tab2', name: 'Tab 2' }
      ]
    }
  },
  methods: {
    closeTab(index) {
      this.tabs.splice(index, 1)
      if (this.currentTab === this.tabs[index]?.id) {
        this.currentTab = this.tabs[0]?.id || ''
      }
    }
  }
}
</script>