el-tabs 在只有一个 tab 时隐藏 tab 栏

原创已于 2025-10-23 16:42:34 修改 · 91 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2025-10-23 16:28:38 首次发布

目的：使el-tabs 在只有一个 tab 时隐藏 tab 栏，多个时才显示tab 栏，提升用户体验
方法：通过计算属性判断 tab 数量，使用 Vue 响应式控制类名绑定
核心：

:class="{ 'single-tab': tabs.length === 1 }"

.single-tab :deep(.el-tabs__header) {
    display: none !important;
}

完整demo

<template>
  <div class="tabs-container">
    <el-tabs
      v-model="activeName"
      type="card"
      :class="{ 'single-tab': tabs.length === 1 }"
      >
      <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 setup>
  import { ref } from "vue";
  const activeName = ref("first");

  const tabs = ref([
    {
      label: "唯一标签",
      name: "first",
      content: "这里是内容",
    },
    // {
    //   label: "二标签",
    //   name: "second",
    //   content: "这里是内容二",
    // },
  ]);
</script>

<style scoped>
  .single-tab :deep(.el-tabs__header) {
    display: none !important;
  }
</style>