修改el-tab标签页的label默认样式（插槽）

目录

需求：

修改方式：

 原始代码：

修改代码：

具体步骤：

---

需求：

修改el-tab标签页的label默认样式（如图所示，该label标签的字体较小，以至于在页面上不太明显，我想修改他的样式）

        图示：

修改前

修改后

修改方式：

 原始代码：

<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 name="first">
   <template #label>
      <div style="font-weight: 600; color: rgb(95, 91, 91);">
         全部
      </div>
    </template>
</el-tab-pane>
<el-tab-pane name="second">
   <template #label>
      <div style="font-weight: 600; color: rgb(95, 91, 91);">
         计算机科学
       </div>
    </template>              
</el-tab-pane>
<el-tab-pane name="third">
   <template #label>
      <div style="font-weight: 600; color: rgb(95, 91, 91);">
         土木工程
       </div>
    </template>              
</el-tab-pane>

具体步骤：

1. 使用插槽：#label
2. 必须用template标签放置label
3. 但是在template使用css样式并不会起效
4. 所以在template中加入div标签
5. 在div标签中使用css样式