elementui tab
ElementUI Tab 组件使用指南
基本用法
ElementUI 的 Tab 组件（el-tabs）提供标签页功能，支持切换不同内容区域。基础代码示例：
<el-tabs v-model="activeTab">
<el-tab-pane label="标签1" name="tab1">内容1</el-tab-pane>
<el-tab-pane label="标签2" name="tab2">内容2</el-tab-pane>
</el-tabs>v-model绑定当前激活的标签页名称（name值）。label定义标签页标题，name用于唯一标识。
动态增减标签页
通过 v-for 动态生成标签页，结合数组操作实现增减：
<el-tabs v-model="activeTab" type="card" closable @tab-remove="handleRemove">
<el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
{{ tab.content }}
</el-tab-pane>
</el-tabs>type="card"设置卡片式标签页样式。closable允许关闭标签页，触发@tab-remove事件。
禁用标签页
通过 disabled 属性禁用特定标签页：
<el-tab-pane label="禁用页" name="tab3" disabled>不可操作</el-tab-pane>自定义标签页内容
使用 slot 自定义标签标题，例如添加图标：
<el-tab-pane>
<template #label>
<span><i class="el-icon-date"></i> 自定义标签</span>
</template>
内容区域
</el-tab-pane>路由集成
结合 Vue Router 实现路由切换：
<el-tabs v-model="activeTab" @tab-click="handleClick">
<el-tab-pane label="首页" name="/home"></el-tab-pane>
<el-tab-pane label="关于" name="/about"></el-tab-pane>
</el-tabs>methods: {
handleClick(tab) {
this.$router.push(tab.name);
}
}样式与位置调整
tab-position控制标签位置（top/right/bottom/left）。- 通过 CSS 覆盖默认样式，例如调整标签间距：
.el-tabs__item {
padding: 0 20px;
}注意事项
- 动态增减标签页时需确保
name唯一。 - 路由模式下需同步
activeTab与当前路由路径。 - 性能优化：避免在
v-for中嵌套复杂逻辑。
以上为 ElementUI Tab 组件的核心用法和扩展技巧，可根据实际需求调整配置。
