ElementUI修改el-tab-pane自定义动态添加class并修改组件样式

在ElementUI中，可以通过动态绑定class来给el-tab-pane添加自定义的类名，并通过CSS来修改组件的样式。以下是一个简单的例子：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in tabs"
      :key="item.name"
      :name="item.name"
      :class="item.customClass"
    >
      {{ item.label }}
    </el-tab-pane>
  </el-tabs>
</template>
 
<script>
export default {
  data() {
    return {
      activeName: 'first',
      tabs: [
        { name: 'first', label: 'Tab 1', customClass: 'custom-class-a' },
        { name: 'second', label: 'Tab 2', customClass: 'custom-class-b' },
        // 更多 tabs ...
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      // 点击 tab 的回调函数
    },
  },
};
</script>
 
<style>
/* 添加自定义样式 */
.custom-class-a {
  color: #333;
  background-color: #f5f5f5;
}
 
.custom-class-b {
  color: #fff;
  background-color: #409eff;
}
</style>

在这个例子中，我们定义了一个tabs数组，其中包含了每个el-tab-pane的配置，包括它们的name、label和customClass。customClass是我们用来动态绑定到el-tab-pane的类名。然后，我们在<style>标签中定义了相应的CSS类，这样就可以根据需要为每个el-tab-pane添加不同的样式。