vue中如何调整el-tabs的每个头样式，详细举例说明

在Vue.js中，调整`el-tabs`组件（Element UI的标签页组件）的每个头部样式的常见做法是通过自定义指令或者修改组件的模板结构，然后应用CSS样式覆盖默认样式。以下是两种示例：

**方法一：使用 scoped 指令**
如果你想要针对每个tab单独定制样式，可以创建一个自定义指令，将样式作为动态属性绑定到每个tab上。

<template>
  <el-tabs v-bind:class="tabClassMap[activeTabIndex]" :active-key="activeTabIndex">
    <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name" @click="onTabClick(index)">
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { label: 'Tab 1', content: '内容1', active: false },
        { label: 'Tab 2', content: '内容2', active: true },
        // 更多tabs...
      ],
      activeTabIndex: 0,
      tabClassMap: {} // 这里会存储每个tab的额外样式
    };
  },
  methods: {
    onTabClick(index) {
      this.activeTabIndex = index;
    }
  },
  directives: {
    customTabStyle: {
      update(el, binding, vnode) {
        const style = { ...el.style }; // 获取当前元素的样式
        // 根据你的需求添加、修改或删除style属性
        style['your-custom-style'] = binding.value; // 绑定自定义样式
        el.style = style; // 更新样式
      }
    }
  }
};
</script>

<style scoped>
.custom-tab-style {
  /* 在这里编写你想要的样式，例如字体颜色、边框等 */
}
</style>

**方法二：修改组件内部样式**
如果不需要为每个tab单独设置样式，你可以直接在组件的`styles`部分修改`el-tabs`或`el-tab-pane`的样式。

<template>
  <el-tabs class="custom-tabs">
    <!-- ... -->
  </el-tabs>
</template>

<style>
.custom-tabs .el-tabs__item {
  /* 添加或修改你喜欢的样式 */
  color: your-color;
  border-bottom: your-border;
}

/* 如果只想影响激活的tab */
.custom-tabs .el-tabs__item.is-active {
  background-color: your-active-color;
}
</style>

记得替换`your-color`, `your-border`, 和 `your-active-color`为你需要的样式值。