当前位置：首页 > VUE

vue结合elementui实现tab

2026-01-22 19:22:13VUE

Vue 结合 ElementUI 实现 Tab 标签页

ElementUI 提供了 el-tabs 组件，可以方便地实现标签页功能。以下是一个完整的实现示例：

安装 ElementUI

确保项目已安装 ElementUI，若未安装可通过以下命令安装：

npm install element-ui -S

引入 ElementUI

在 main.js 中全局引入 ElementUI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

基本用法

在 Vue 组件中使用 el-tabs 和 el-tab-pane 实现标签页：

vue结合elementui实现tab

<template>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <el-tab-pane label="用户管理" name="user">用户管理内容</el-tab-pane>
    <el-tab-pane label="配置管理" name="config">配置管理内容</el-tab-pane>
    <el-tab-pane label="角色管理" name="role">角色管理内容</el-tab-pane>
    <el-tab-pane label="定时任务" name="task">定时任务内容</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'user'
    };
  },
  methods: {
    handleTabClick(tab) {
      console.log('当前标签页:', tab.name);
    }
  }
};
</script>

动态生成 Tab

可以通过 v-for 动态生成标签页：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane 
      v-for="tab in tabs" 
      :key="tab.name" 
      :label="tab.label" 
      :name="tab.name"
    >
      {{ tab.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'user',
      tabs: [
        { label: '用户管理', name: 'user', content: '用户管理内容' },
        { label: '配置管理', name: 'config', content: '配置管理内容' },
        { label: '角色管理', name: 'role', content: '角色管理内容' }
      ]
    };
  }
};
</script>

可关闭的 Tab

实现可关闭的标签页需要手动管理标签页数据：

vue结合elementui实现tab

<template>
  <el-tabs v-model="activeTab" type="card" closable @tab-remove="handleTabRemove">
    <el-tab-pane 
      v-for="tab in tabs" 
      :key="tab.name" 
      :label="tab.label" 
      :name="tab.name"
    >
      {{ tab.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'user',
      tabs: [
        { label: '用户管理', name: 'user', content: '用户管理内容' },
        { label: '配置管理', name: 'config', content: '配置管理内容' }
      ]
    };
  },
  methods: {
    handleTabRemove(targetName) {
      this.tabs = this.tabs.filter(tab => tab.name !== targetName);
      if (this.activeTab === targetName) {
        this.activeTab = this.tabs[0]?.name || '';
      }
    }
  }
};
</script>

添加新 Tab

实现添加新标签页功能：

<template>
  <div>
    <el-button @click="addTab">添加标签页</el-button>
    <el-tabs v-model="activeTab" type="card" closable @tab-remove="handleTabRemove">
      <el-tab-pane 
        v-for="tab in tabs" 
        :key="tab.name" 
        :label="tab.label" 
        :name="tab.name"
      >
        {{ tab.content }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'user',
      tabs: [
        { label: '用户管理', name: 'user', content: '用户管理内容' }
      ],
      tabIndex: 1
    };
  },
  methods: {
    addTab() {
      const newTabName = `newTab${this.tabIndex++}`;
      this.tabs.push({
        label: `新标签页 ${this.tabIndex}`,
        name: newTabName,
        content: `这是新标签页 ${this.tabIndex} 的内容`
      });
      this.activeTab = newTabName;
    },
    handleTabRemove(targetName) {
      this.tabs = this.tabs.filter(tab => tab.name !== targetName);
      if (this.activeTab === targetName) {
        this.activeTab = this.tabs[0]?.name || '';
      }
    }
  }
};
</script>

Tab 样式自定义

可以通过 CSS 自定义标签页样式：

/* 修改激活标签页的样式 */
.el-tabs__item.is-active {
  color: #ff0000;
  font-weight: bold;
}

/* 修改标签页下划线颜色 */
.el-tabs__active-bar {
  background-color: #ff0000;
}

注意事项