Vue3中el-tabs

### Vue3 中 Element Plus 库的 `el-tabs` 组件使用方法

#### 基本用法

在 Vue3 和 Element Plus 中，`el-tabs` 组件用于创建标签页界面。通过设置属性可以自定义样式和行为。

<template>
  <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-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from 'vue'

const activeName = ref('first')
</script>

此代码展示了如何初始化并切换不同的标签页面[^1]。

#### 高级特性

为了实现更复杂的功能，比如关闭按钮、卡片风格等：

<template>
  <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit">
    <el-tab-pane
      v-for="(item, index) in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref, reactive } from 'vue'

let id = 2;
const editableTabsValue = ref('0');
const editableTabs = reactive([
  {
    title: 'Tab 1',
    name: '0',
    content: 'Tab 1 content'
  },
  {
    title: 'Tab 2',
    name: '1',
    content: 'Tab 2 content'
  }
]);

function handleTabsEdit(targetName, action) {
  if (action === 'add') {
    const newTabName = ++id.toString();
    editableTabs.push({
      title: 'New Tab' + newTabName,
      name: newTabName,
      content: 'New Tab content'
    });
    editableTabsValue.value = newTabName;
  } else if (action === 'remove') {
    const tabs = editableTabs;
    let activeName = editableTabsValue.value;
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;
          }
        }
      });
      editableTabsValue.value = activeName;
    }

    editableTabs.splice(
      editableTabs.findIndex(tab => tab.name === targetName),
      1
    );
  }
}
</script>

这段脚本实现了带有增删功能的动态标签页效果。

#### 自定义样式

对于去除默认样式的下划线需求，可以通过 CSS 覆盖来完成:

/* 移除 el-tabs 下方横线 */
.el-tabs__header .is-top::after{
  height: 0 !important;
}

/* 或者完全移除整个边框 */
.el-tabs--border-card>.el-tabs__header{
  border-bottom:none!important;
}

上述样式规则能够有效消除 `el-tabs` 默认带有的视觉装饰[^2]。