el-tabs 自定义样式

### 如何对 `el-tabs` 组件进行自定义样式 在使用 Element-UI 的 `el-tabs` 组件时，可以通过覆盖默认样式或者利用 Scoped CSS 来实现自定义样式[^1]。以下是具体的实现方法以及示例代码： #### 方法一：全局覆盖默认样式 通过编写全局的 CSS 或 SCSS 文件来修改 `el-tabs` 默认类名下的样式属性。 ```css /* 修改 tab 头部背景颜色 */ .el-tabs__header { background-color: #f0f0f0; } /* 修改选中的 tab 样式 */ .el-tabs__item.is-active { color: white !important; background-color: #409eff !important; } /* 修改未选中的 tab 颜色 */ .el-tabs__item { color: black !important; } ``` 上述代码片段展示了如何调整 Tab 头部的颜色、字体颜色以及其他视觉效果。 --- #### 方法二：局部作用域 (Scoped CSS) 如果希望仅针对某个特定页面或组件应用样式，则可以使用 Vue 单文件组件中的 `<style scoped>` 属性。 ```vue <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> /* 使用深度选择器（>>>）穿透到子组件内部 */ ::v-deep .el-tabs__header { background-color: #eaeaea; } ::v-deep .el-tabs__item.is-active { color: white !important; background-color: #ff5722 !important; } ::v-deep .el-tabs__item:hover { color: #ff5722 !important; } </style> ``` 在此示例中，`:v-deep` 是用于突破 Scoped CSS 边界的工具，允许开发者访问并修改嵌套组件内的样式[^2]。 --- #### 方法三：动态绑定 class 实现更灵活的定制化 当需要根据不同条件改变 Tabs 的外观时，可结合 JavaScript 动态绑定额外的 Class 名称。 ```vue <template> <div :class="{ customTabsClass: isCustom }"> <el-tabs v-model="activeName"> <el-tab-pane label="首页" name="home"></el-tab-pane> <el-tab-pane label="消息" name="message"></el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { activeName: 'home', isCustom: true, }; }, }; </script> <style> .customTabsClass .el-tabs__nav-wrap::after { height: 0px; /* 去掉底部线条 */ } .customTabsClass .el-tabs__item.is-active { font-weight: bold; border-bottom: 3px solid red; } </style> ``` 此方式适用于复杂场景下基于状态变化而触发样式的更改需求。 --- ### 总结 以上三种方案分别适合不同的开发环境与项目结构。对于简单的 UI 调整推荐直接覆盖默认样式；而对于模块化的大型前端工程则建议采用 Scoped CSS 和动态绑定相结合的方式来达到最佳实践标准。