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

在Vue.js中，Element UI库中的`<el-tabs>`组件允许你通过CSS样式来自定义头部标签（tab headers）的外观。虽然Element本身提供了一定程度的默认样式覆盖选项，但如果需要更深入的自定义，你可以直接操作DOM或者使用`v-bind`指令来设置CSS类。

例如，假设你想改变每个标签的颜色和字体大小，可以这样做：

<template>
  <el-tabs v-bind:class="{ custom-tabs: true }">
    <el-tab-pane v-for="tab in tabs" :key="tab.name">
      {{ tab.name }}
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped>
.custom-tabs .el-tabs__item {
  color: #3399ff; /* 更改文本颜色 */
  font-size: 14px; /* 更改字体大小 */
}
</style>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab 1' },
        { name: 'Tab 2' },
        { name: 'Tab 3' }
      ]
    };
  }
};
</script>

在这个例子中，我们添加了一个名为`custom-tabs`的自定义类，并在CSS中设置了`.custom-tabs .el-tabs__item`的选择器，这会影响所有`el-tabs`组件内的标签标题。

如果你想对特定标签进行单独的样式定制，可以在`el-tab-pane`上添加额外的CSS类，并在对应的`.vue`文件里指定样式。