ElementPlus的el-tabs组件自定义标签头、去掉长分割线、去掉下划线、修改下划线的样式、修改标签头的字体颜色（选中状态和未选中状态）、修改鼠标悬浮时标签头的样式_elementuiplus tabs

el-tabs组件的基本用法在ElementPlus官网有详细介绍（ Tabs标签页），本文主要介绍如何修改el-tabs的样式

1. 自定义标签头

在 el-tab-pane label 标签中添加一个名为 label 的插槽

1.1 默认的标签头

1.2 自定义的标签头

参考代码（在 el-tab-pane label 标签中添加一个名为label的插槽）

<el-tabs v-model="activeName">
  <el-tab-pane label="User" name="first">
    <template #label>
      <div class="user-container">
        <div class="text">User</div>
        <div class="avatar">
          <img src="https://avatars.githubusercontent.com/u/72015883?v=4" alt="">
        </div>
      </div>
    </template>
    <!--在此处编写User页面的代码-->
    User
  </el-tab-pane>
  <!--剩下的内容省略-->
</el-tabs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. 去掉长分割线

2.1 去掉长分割线前

2.2 去掉长分割线后

css代码

:deep(.el-tabs__nav-wrap::after) {
  position: static !important;
}
1
2
3

3. 去掉下划线

3.1 去掉下划线前

3.2 去掉下划线后

css代码

:deep(.el-tabs__active-bar) {
  background-color: transparent !important;
}
1
2
3

3.3 同时去掉长分割线和下划线

css代码

/* 去掉长分割线 */
:deep(.el-tabs__nav-wrap::after) {
  position: static !important;
}

/* 去掉下划线 */
:deep(.el-tabs__active-bar) {
  background-color: transparent !important;
}
1
2
3
4
5
6
7
8
9

4. 修改下划线的样式

4.1 修改下划线的样式前

4.2 修改下划线的样式后

css代码

:deep(.el-tabs__active-bar) {
  background-color: orange;
}
1
2
3

5. 修改标签头的字体颜色（选中状态和未选中状态）

5.1 修改前

5.2 修改后

css代码

/* 未选中状态的样式 */
:deep(.el-tabs__item) {
  color: green;
}

/* 选中状态的样式 */
:deep(.el-tabs__item.is-active) {
  color: purple;
}
1
2
3
4
5
6
7
8
9

6. 修改鼠标悬浮时标签头的样式

6.1 修改前

6.2 修改后

css代码

/* 鼠标悬浮时的样式 */
:deep(.el-tabs__item:hover) {
  color: orange;
  cursor: zoom-in; /* 鼠标指针的样式 */
}
1
2
3
4
5