Modify the label default style (slot) of the el-tab tab page

Table of contents

need:

Modification method:

 Original code:

Modify the code:

Specific steps:

---

need:

Modify the default label style of the el-tab tab page (as shown in the picture, the font of the label label is smaller, so that it is not obvious on the page, I want to modify its style)

        Illustration:

before fixing

After modification

Modification method:

 Original code:

<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>

Modify the code:

<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>

Specific steps:

1. Use slot: #label
2. Label must be placed with template tag
3. But using css style in template will not work
4. So add the div tag to the template
5. Use css styles in div tags