Element UI Tabs 样式修改 - 如何在选中时改变字体颜色和添加下划线

这段代码演示了如何使用 Element UI 的 Tabs 组件，并通过添加自定义样式，实现选中分页标签时字体变蓝和添加下划线的效果。

问题描述

在使用 Element UI 的 Tabs 组件时，我们希望选中分页标签后，可以改变字体颜色并添加下划线，但默认情况下，只有 "全部" 标签有这样的样式。当选中其他标签时，没有样式变化。

解决方案

通过以下步骤可以实现自定义选中状态下的样式：

1. 添加 class 属性: 在 <el-tab-pane> 标签上添加一个自定义的 class 属性，例如 custom-tab。

<el-tab-pane v-for="(item, index) in carouselType" :label="item.dictLabel" :name="index" class="custom-tab">
  <template #label>
    <div class="cat-tab">
      <span>{{ item.dictLabel }}</span>
    </div>
  </template>
</el-tab-pane>

2. 定义样式: 在 <style scoped> 标签中，定义 custom-tab.is-active .cat-tab 的样式，使选中状态下字体变蓝并添加下划线。

<style scoped>
.custom-tab.is-active .cat-tab {
  color: blue;
  text-decoration: underline;
}
</style>

代码示例

<el-tabs v-model="carouselTypeSelected" :stretch="false" @tab-change="handleClick">
  <el-tab-pane name="-1">
    <template #label>
      <div class="cat-tab">
        <span>全部</span>
      </div>
    </template>
  </el-tab-pane>
  <el-tab-pane v-for="(item, index) in carouselType" :label="item.dictLabel" :name="index" class="custom-tab">
    <template #label>
      <div class="cat-tab">
        <span>{{ item.dictLabel }}</span>
      </div>
    </template>
  </el-tab-pane>
</el-tabs>

<style scoped>
.custom-tab.is-active .cat-tab {
  color: blue;
  text-decoration: underline;
}
</style>

通过以上步骤，我们成功地为除了 "全部" 以外的分页标签添加了选中状态的样式。