当前位置：首页 > 前端教程

elementui tabs

2026-01-14 20:54:28前端教程

ElementUI Tabs 基础用法

ElementUI 的 Tabs 组件提供了一种便捷的方式来组织内容，通过标签页的形式展示不同板块的信息。使用 el-tabs 和 el-tab-pane 组件可以快速构建标签页布局。

<el-tabs v-model="activeName">
  <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理内容</el-tab-pane>
</el-tabs>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    }
  }
}
</script>

标签页属性配置

el-tabs 组件支持多种属性配置，以满足不同场景需求。type 属性可以设置标签页样式，支持 card 和 border-card 两种风格。

closable 属性控制是否显示关闭按钮，editable 属性允许动态添加和删除标签页。stretch 属性可以让标签项自动撑开容器宽度。

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

动态操作标签页

通过编程方式可以动态控制标签页的增删改查。结合 Vue 的响应式特性，修改数据数组即可实现标签页的动态更新。

methods: {
  addTab() {
    const newTabName = `newTab${this.tabIndex++}`
    this.tabs.push({
      label: `New Tab ${this.tabIndex}`,
      name: newTabName,
      content: `New Tab content`
    })
    this.activeName = newTabName
  },
  removeTab(targetName) {
    const tabs = this.tabs
    let activeName = this.activeName
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
    this.activeName = activeName
    this.tabs = tabs.filter(tab => tab.name !== targetName)
  }
}

标签页事件处理

Tabs 组件提供了多个事件钩子，可以监听标签页的各种交互行为。tab-click 事件在点击标签时触发，tab-remove 事件在删除标签时触发，edit 事件在点击新增或删除按钮时触发。

methods: {
  handleClick(tab) {
    console.log('Clicked tab:', tab)
  },
  handleRemove(name) {
    console.log('Removing tab:', name)
  },
  handleEdit(targetName, action) {
    if (action === 'add') {
      this.addTab()
    } else if (action === 'remove') {
      this.removeTab(targetName)
    }
  }
}

嵌套标签页实现

ElementUI 支持多层嵌套的标签页结构，可以在一个标签页内再嵌套另一组标签页。这种设计适合需要多级分类的场景。

<el-tabs v-model="outerActiveName">
  <el-tab-pane label="外层标签一" name="outer1">
    <el-tabs v-model="innerActiveName">
      <el-tab-pane label="内层标签A" name="innerA">内容A</el-tab-pane>
      <el-tab-pane label="内层标签B" name="innerB">内容B</el-tab-pane>
    </el-tabs>
  </el-tab-pane>
  <el-tab-pane label="外层标签二" name="outer2">外层内容二</el-tab-pane>
</el-tabs>

标签页与路由集成

将标签页与 Vue Router 集成可以实现基于路由的标签页导航。通过监听路由变化动态更新激活的标签页，或通过点击标签页切换路由。

watch: {
  '$route'(to) {
    this.activeName = to.name
  }
},
methods: {
  handleTabClick(tab) {
    this.$router.push({ name: tab.name })
  }
}

自定义标签页样式

通过覆盖 ElementUI 的默认样式或使用插槽可以自定义标签页的外观。label 插槽允许完全自定义标签内容，包括添加图标或其他自定义元素。

<el-tabs>
  <el-tab-pane>
    <template #label>
      <span><i class="el-icon-date"></i> 自定义标签</span>
    </template>
    自定义标签内容
  </el-tab-pane>
</el-tabs>

<style>
.el-tabs__item {
  font-size: 16px;
}
.el-tabs__nav-wrap::after {
  background-color: #409EFF;
}
</style>

响应式标签页布局

针对不同屏幕尺寸，可以调整标签页的布局方式。结合 CSS 媒体查询和 ElementUI 的响应式特性，确保在各种设备上都有良好的显示效果。

@media (max-width: 768px) {
  .el-tabs__nav {
    flex-wrap: wrap;
  }
  .el-tabs__item {
    padding: 0 10px;
  }
}

标签页性能优化

当标签页内容较复杂或包含大量数据时，可以使用 v-if 或 keep-alive 优化性能。lazy 属性可以延迟渲染未激活的标签页内容。

<el-tabs v-model="activeName" type="border-card">
  <el-tab-pane name="first" lazy>
    <complex-component v-if="activeName === 'first'"/>
  </el-tab-pane>
  <el-tab-pane name="second" lazy>
    <another-component v-if="activeName === 'second'"/>
  </el-tab-pane>
</el-tabs>

elementui tabs