<think>我们正在使用
Element UI的
el-tabs组件来实现多页签功能。根据引用[1]和引用[2]中的示例，我们可以学习到
el-tabs的基本用法和一些使用技巧。
主要步骤：
1
. 在模板中使用`<
el-tabs>`标签，并通过`v
-mod
el`绑定当前激活的
标签页的name值。
2
. 在`<
el-tabs>`内部使用多个`<
el-tab
-pane>`来定义每个
标签页。
3
. 每个`<
el-tab
-pane>`需要设置`lab
el`（
标签页标题）和`name`（唯一标识符）属性。
4
. 可以通过`@tab
-click`事件来处理
标签页切换时的操作。
此外，引用[1]中提到一个技巧：将
标签页的共有内容放在`<
el-tabs>`外部，避免在每个
标签页内部重复编写相同的内容。
下面是一个简单的示例，展示如何使用
el-tabs实现多页签功能：
```html
<template>
<div>
<
el-tabs v
-mod
el="activeName" @tab
-click="handleClick">
<
el-tab
-pane lab
el="用户管理" name="first">用户管理的内容</
el-tab
-pane>
<
el-tab
-pane lab
el="配置管理" name="second">配置管理的内容</
el-tab
-pane>
<
el-tab
-pane lab
el="角色管理" name="third">角色管理的内容</
el-tab
-pane>
</
el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeName: 'first' // 默认激活第一个
标签页
};
},
methods: {
handleClick(tab, event) {
console
.log(tab, event);
// 在这里可以处理
标签页切换时的逻辑
}
}
};
</script>
```
在这个示例中：
- `activeName`是当前激活的
标签页的name，初始值为'first'，所以默认显示第一个
标签页。
- 每个`<
el-tab
-pane>`的内容可以是任何自定义的HTML或
组件。
如果多个
标签页有相同的内容（比如一个图片查看器），可以将其放在`<
el-tabs>`外部，如引用[1]所示：
```html
<
el-tabs v
-mod
el="formData
.type">
<
el-tab
-pane lab
el="前部" name="1"></
el-tab
-pane>
<
el-tab
-pane lab
el="后部" name="2"></
el-tab
-pane>
<!
-- 其他
标签页 -->
</
el-tabs>
<
el-image v
-for="(item, key) in personPhotos" :key="key" :src="item" :preview
-src
-list="[item]"></
el-image>
```
这样，图片查看器会显示在
标签页的下方，并且不会随着
标签页的切换而改变，因为它是独立于
标签页内容的。
另外，引用[2]展示了如何通过内联
样式修改el-tabs的
样式，例如设置高度、宽度、颜色等。
如果需要更复杂的
样式修改，可能需要使用深度选择器（如`::v
-deep`）来覆盖
Element UI的默认
样式。
例如，
修改标签页标题的
样式：
```css
::v
-deep
.el-tabs__item {
color: #909399;
height: 40px;
line
-height: 40px;
}
::v
-deep
.el-tabs__item
.is
-active {
color: #409EFF;
}
```
注意：在
Vue项目中，使用`::v
-deep`可以穿透scoped
样式，确保
样式生效。
综上所述，我们可以通过上述方法实现一个基本的多页签功能，并根据需要进行
样式调整和内容布局优化。
§§相关问题§§
1
. 如何在
el-tabs中动态添加或删除
标签页？
2
. el-tabs组件有哪些常用的事件和属性？
3
. 如何实现
标签页内容的懒加载（切换时才加载内容）？
4
. 如何
修改el-tabs的
样式（如标签栏背景色、激活标签
样式等）？</think>以下是如何使用
Element UI 的 `
el-tabs`
组件实现多页签功能的详细教程和示例：
### 一、基础实现教程
1
. **安装
Element UI**
在
Vue 项目中安装：
```bash
npm install
element
-ui
```
2
. **基础用法**
```html
<template>
<
el-tabs v
-mod
el="activeTab" @tab
-click="handleTabClick">
<
el-tab
-pane lab
el="用户管理" name="users">
<!
-- 用户管理内容
-->
</
el-tab
-pane>
<
el-tab
-pane lab
el="订单管理" name="orders">
<!
-- 订单管理内容
-->
</
el-tab
-pane>
<
el-tab
-pane lab
el="系统设置" name="settings">
<!
-- 系统设置内容
-->
</
el-tab
-pane>
</
el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: "users" // 默认激活的
标签页
};
},
methods: {
handleTabClick(tab) {
console
.log("切换到标签:", tab
.name);
}
}
};
</script>
```
### 二、核心功能详解
1
. **属性配置**
- `v
-mod
el`：绑定当前激活标签的标识符（如 `name` 值）
- `type`：标签
样式类型（可选 `card`/`border
-card`）
- `stretch`：标签是否等宽拉伸（布尔值）
```html
<
el-tabs v
-mod
el="activeTab" type="border
-card" :stretch="true">
```
2
. **动态添加/删除
标签页**
```html
<template>
<
el-tabs v
-mod
el="activeTab" closable @tab
-remove="removeTab">
<
el-tab
-pane
v
-for="tab in
tabs"
:key="tab
.name"
:lab
el="tab
.lab
el"
:name="tab
.name"
>
{{ tab
.content }}
</
el-tab
-pane>
</
el-tabs>
<
el-button @click="addTab">+ 添加
标签页</
el-button>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1',
tabs: [
{ name: 'tab1', lab
el: '标签1', content: '内容1' },
{ name: 'tab2', lab
el: '标签2', content: '内容2' }
],
tabIndex: 2
}
},
methods: {
addTab() {
this
.tabIndex++;
this
.tabs.push({
name: 'tab' + this
.tabIndex,
lab
el: '新标签' + this
.tabIndex,
content: '新内容' + this
.tabIndex
});
this
.activeTab = 'tab' + this
.tabIndex;
},
removeTab(name) {
const index = this
.tabs.findIndex(tab => tab
.name === name);
if (index >
-1) {
this
.tabs.splice(index, 1);
}
}
}
}
</script>
```
3
. **优化技巧**
- **内容复用**（引用[1]技巧）：
将通用内容放在 `
el-tabs` 外部，避免重复渲染
```html
<
el-tabs v
-mod
el="activeTab">
<
el-tab
-pane lab
el="视图1" name="view1"></
el-tab
-pane>
<
el-tab
-pane lab
el="视图2" name="view2"></
el-tab
-pane>
</
el-tabs>
<!
-- 共用内容区域
-->
<div class="shared
-content">
<
el-table :data="tableData">
...</
el-table>
</div>
```
### 三、
样式自定义示例
```html
<
el-tabs
v
-mod
el="activeTab"
class="custom
-tabs"
:style="{
'
--active
-color': '#409EFF',
'
--bg
-color': '#f5f7fa'
}"
>
<!
-- 标签页内容
-->
</
el-tabs>
<style>
/* 深度选择器
修改内部
样式 */
.custom
-tabs ::v
-deep
.el-tabs__item {
height: 50px;
font
-size: 16px;
}
.custom
-tabs ::v
-deep
.el-tabs__item
.is
-active {
color: var(
--active
-color);
font
-weight: bold;
}
.custom
-tabs ::v
-deep
.el-tabs__header {
background: var(
--bg
-color);
}
</style>
```
### 四、高级功能
1
. **
标签页懒加载**
使用 `lazy` 属性实现切换时加载内容
```html
<
el-tab
-pane lab
el="大数据报表" name="report" :lazy="true">
<heavy
-data
-component /> <!
-- 重量级
组件 -->
</
el-tab
-pane>
```
2
. **路由集成**
结合
Vue Router 实现路由级
标签页：
```html
<
el-tabs v
-mod
el="activeTab" @tab
-click="toRoute">
<
el-tab
-pane lab
el="首页" name="/home"></
el-tab
-pane>
<
el-tab
-pane lab
el="产品" name="/products"></
el-tab
-pane>
</
el-tabs>
<script>
methods: {
toRoute(tab) {
this
.$router
.push(tab
.name)
}
}
</script>
```
### 五、常见问题解决
1
. **内容高度异常**
添加 `style="height: 100%"` 解决高度塌陷：
```html
<
el-tabs style="height: 100%">
<
el-tab
-pane style="height: calc(100%
- 40px)">
<!
-- 内容区域
-->
</
el-tab
-pane>
</
el-tabs>
```
2
. **动态更新标签标题**
```
javascript
//
修改指定标签的标题
this
.tabs.find(tab => tab
.name === 'orders')
.lab
el = '新订单';
```
> 提示：更多
样式定制可参考
Element UI 官方文档的 [
Tabs 组件](https://
element
.eleme
.cn/#/zh
-CN/component/
tabs) 部分[^1][^2]。
文章介绍了ElementUI库中的el-tabs组件的用法，包括HTML结构和CSS样式调整，展示了如何创建一个带有边框卡片样式的标签切换功能。
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
