修改el-tabs的高度和行高
时间: 2025-05-10 22:34:44 浏览: 22
### 修改 Element UI 中 el-tabs 的高度和行高的样式
为了自定义 Element UI `el-tabs` 组件的高度与行高,可以通过覆盖其默认的 CSS 样式来实现。以下是具体的方法:
#### 方法一:全局覆盖样式
如果希望在整个项目中统一应用新的样式,可以在项目的全局样式文件(如 `style.scss` 或其他公共样式文件)中添加以下代码:
```css
/* 调整整个 el-tabs 高度 */
.el-tabs {
height: auto;
}
/* 调整 tab 头部的高度 */
.el-tabs__header {
height: 50px; /* 设置头部高度 */
}
/* 调整每个 tab 项的高度以及垂直居中文字 */
.el-tabs__item {
height: 50px; /* 设置单个 Tab 的高度 */
line-height: 50px; /* 让文字垂直居中 */
font-size: 14px; /* 可选:调整字体大小 */
}
/* 如果有滚动条,也可以调整滚动容器的高度 */
.el-tabs__nav-scroll {
overflow-x: auto; /* 确保可以水平滚动 */
}
```
以上代码通过直接覆盖 `.el-tabs`, `.el-tabs__header`, 和 `.el-tabs__item` 的默认样式,实现了对高度和行高的控制。
---
#### 方法二:局部作用域样式
如果仅需针对某个特定组件中的 `el-tabs` 进行样式修改,则可以使用 `<style scoped>` 并结合深度选择器 `/deep/` 来完成。例如:
```html
<template>
<div>
<el-tabs v-model="activeName">
<el-tab-pane label="用户管理" name="first">内容</el-tab-pane>
<el-tab-pane label="配置管理" name="second">内容</el-tab-pane>
</el-tabs>
</div>
</template>
<style scoped>
/deep/ .el-tabs__header {
height: 60px; /* 设置头部高度 */
}
/deep/ .el-tabs__item {
height: 60px; /* 单个 Tab 的高度 */
line-height: 60px; /* 文字垂直居中 */
font-size: 16px; /* 字体大小可调 */
}
</style>
```
上述方式适用于 Vue 单文件组件(`.vue` 文件),并通过 `/deep/` 实现样式的穿透效果[^3]。
---
#### 方法三:动态计算高度
对于某些复杂场景下需要动态调整高度的情况,可以借助 JavaScript 动态设置样式。例如,在 `mounted` 生命周期钩子中执行如下操作:
```javascript
export default {
mounted() {
this.$nextTick(() => {
const tabsHeader = document.querySelector('.el-tabs__header');
if (tabsHeader) {
tabsHeader.style.height = '70px'; // 动态设置高度
}
});
},
};
```
此方法适合于那些无法完全依赖静态样式解决的需求场景。
---
### 总结
无论是通过全局样式还是局部样式的方式,都可以灵活地调整 `el-tabs` 的高度和行高。推荐优先考虑全局样式或局部作用域样式的方式来满足设计需求,而动态计算则作为补充手段用于特殊场景下的适配。
---
阅读全文
相关推荐

















