Element UI Tabs 选中分页标签改变样式

<template>
  <el-tabs v-model="carouselTypeSelected" :stretch="false" @tab-change="handleClick">
    <el-tab-pane v-for="(item, index) in carouselType" :label="item.dictLabel" :name="index" :key="index">
      <template #label>
        <div :class="['cat-tab', {'active-tab': carouselTypeSelected === index }]">
          <span>{{ item.dictLabel }}</span>
        </div>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      carouselTypeSelected: null,
      carouselType: [
        { dictLabel: '标签1' },
        { dictLabel: '标签2' },
        { dictLabel: '标签3' }
      ]
    };
  },
  methods: {
    handleClick(name) {
      this.carouselTypeSelected = name;
      this.handleQuery();
    },
    handleQuery() {
      // 进行分页查询的逻辑
    }
  }
};
</script>
<style scoped>
.cat-tab {
  min-width: 100px;
  font-size: 14px;
  font-weight: bold;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active-tab {
  color: blue;
}
</style>