Element UI 的 Tabs 标签页开发教程

1. 基础用法（静态标签页）

最基础的标签页由外层 <el-tabs>和内层多个 <el-tab-pane>组成。通过 v-model绑定当前激活页的 name。

代码示例：

复制代码

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <!-- 标签页1 -->
    <el-tab-pane label="用户管理" name="first">
      这里是用户管理的内容
    </el-tab-pane>
    <!-- 标签页2 -->
    <el-tab-pane label="配置管理" name="second">
      这里是配置管理的内容
    </el-tab-pane>
    <!-- 标签页3（禁用） -->
    <el-tab-pane label="角色管理" name="third" :disabled="true">
      这里是角色管理的内容
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first' // 默认激活第一个标签
    };
  },
  methods: {
    handleClick(tab) {
      console.log('切换到标签:', tab.name);
    }
  }
};
</script>

核心属性说明：

v-model="activeName" ：双向绑定，activeName的值对应某个 el-tab-pane的 name。
label：标签页显示的名称。
name：标签页的唯一标识符（必填）。
disabled：禁用该标签页。

2. 进阶样式与布局

2.1 卡片风格 (Card Style)

通过设置 type属性，可以改变标签页的外观，常用于更紧凑的布局。

复制代码

<!-- 普通卡片风格 -->
<el-tabs v-model="activeName" type="card">
  <el-tab-pane label="Tab1" name="1">内容1</el-tab-pane>
  <el-tab-pane label="Tab2" name="2">内容2</el-tab-pane>
</el-tabs>

<!-- 带边框的卡片风格 -->
<el-tabs type="border-card">
  <el-tab-pane label="Tab1">内容1</el-tab-pane>
  <el-tab-pane label="Tab2">内容2</el-tab-pane>
</el-tabs>

2.2 标签位置 (Position)

通过 tab-position属性，可以将标签栏放置在容器的左侧、右侧、顶部（默认）或底部。注意：左右布局时通常需要手动设置容器高度。

复制代码

<el-tabs v-model="activeName" tab-position="left" style="height: 300px;">
  <el-tab-pane label="左侧导航1" name="1">内容1</el-tab-pane>
  <el-tab-pane label="左侧导航2" name="2">内容2</el-tab-pane>
</el-tabs>

3. 动态增减标签页（高级功能）

在需要动态管理标签（如浏览器标签页）的场景下，可以使用 editable属性配合数组渲染。

实现步骤：

将 editable设为 true，监听 @edit事件。
使用数组 tabsList循环渲染 el-tab-pane。
在 handleEdit方法中根据 action（'add' 或 'remove'）操作数组。

代码示例：

复制代码

<template>
  <el-tabs 
    v-model="activeTab" 
    type="card" 
    :editable="true" 
    @edit="handleEdit">
    
    <el-tab-pane 
      v-for="tab in tabsList" 
      :key="tab.name"
      :label="tab.title" 
      :name="tab.name"
      :closable="tab.closable">
      {{ tab.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '1',
      tabIndex: 1,
      tabsList: [{
        title: '初始标签',
        name: '1',
        content: '初始内容',
        closable: false // 第一个标签不可关闭
      }]
    };
  },
  methods: {
    handleEdit(targetName, action) {
      if (action === 'add') {
        // 添加新标签
        this.tabIndex++;
        const newTab = {
          title: '新标签' + this.tabIndex,
          name: this.tabIndex.toString(),
          content: '新内容',
          closable: true
        };
        this.tabsList.push(newTab);
        this.activeTab = newTab.name;
        
      } else if (action === 'remove') {
        // 删除标签
        let tabs = this.tabsList;
        if (tabs.length <= 1) {
          alert('至少保留一个标签页');
          return;
        }
        this.tabsList = tabs.filter(tab => tab.name !== targetName);
        // 如果删除的是当前激活页，自动激活最后一个
        if (this.activeTab === targetName) {
          this.activeTab = this.tabsList[this.tabsList.length - 1].name;
        }
      }
    }
  }
};
</script>

4. 性能优化与懒加载

如果某个标签页内容非常复杂（如包含大型表格或图表），可以使用 lazy属性实现懒加载。只有切换到该标签时才会渲染内容，避免页面初始化卡顿。

复制代码

<el-tab-pane label="大数据报表" name="report" :lazy="true">
  <!-- 这里可能是很重的组件 -->
  <heavy-chart-component />
</el-tab-pane>

5. 注意事项与常见问题

name属性必填 ：v-model绑定的是 name，不是 label。name推荐使用字符串（如 'user'）而非数字，避免类型转换陷阱。
动态渲染问题 ：如果标签页内容是通过异步数据渲染的，切换标签时可能会出现"闪屏"或数据不同步。建议在子组件内使用 mounted或 activated钩子处理数据获取。
样式覆盖 ：Element UI 的标签页样式比较固定。如需深度定制（如修改下划线颜色），需要使用深度选择器（如 /deep/或 ::v-deep），并注意样式隔离。

6. 官方文档地址

由于 Element UI 已归档，建议在维护老项目时参考以下文档：

Element UI (Vue 2) 官方文档 ：https://element.eleme.io/#/zh-CN/component/tabs

特别提醒 ：如果你正在开发新项目 ，请务必使用 **Element Plus (Vue 3)** 或其它现代 UI 库，Element UI 仅适合维护存量项目。