记录：利用css改变el-tabs自定义样式，背景色、激活选中样式、tab底部蓝条横线样式等

最新推荐文章于 2024-08-22 01:15:54 发布

一架打字机

最新推荐文章于 2024-08-22 01:15:54 发布

阅读量5.2k

点赞数 14

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/iseyre/article/details/134598758

版权

文章介绍了如何使用CSS来修改ElementUI中的el-tabs组件，包括背景色、激活样式和个性化底部横杠设计，提供了详细的代码示例供读者参考和自定义.

摘要由CSDN通过智能技术生成

原生样式：

修改后样式：

利用css改变el-tabs样式，背景色、激活样式等，代码如下可直接复制

<div class='my-tabs'>
 <el-tabs v-model="activeName" @tab-click="handleClick">
    <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>
</div>

css:

// 修改el-tabs
.my-tabs >>> .el-tabs__item.is-active {
  background: rgba(0, 102, 255, 0.08);
  border-radius: 4px 4px 3px 3px;
}

.my-tabs >>> .el-tabs__active-bar {
  background-color: #166fe8; /* 修改底部横杠的颜色 */
  height: 3px; /* 修改底部横杠的高度 */
  // width: 100px !important;
  // left: 30%;
}
.my-tabs /deep/ .el-tabs__active-bar::after{
//给激活的时底部tab横线添加三角
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 39%;
  bottom:2px;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 5px solid #166fe8;
}
.my-tabs /deep/ .el-tabs__item {
  //
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px !important;
  padding: 0 !important;
}
.my-tabs /deep/ .el-tabs__nav.is-top{
  display: flex;
}
.my-tabs /deep/ .el-tabs__nav.is-top > div {
  width: 100px;
  text-align: center;
}

这样就行了如果有其他需求可根据代码自行修改