spfm-market-front/src/pages/main/leader/components/tabs.vue

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <!-- <el-tab-pane
    class="flex-tabs"
      v-for="item in tabList"
      :key="item.index"
      :label="item.label"
      :name="item.index"
    >
    </el-tab-pane> -->
    <el-tab-pane v-for="item in tabList" :key="item.index" :name="item.index">
      <span slot="label"
        >{{ item.label }} <span v-if="item.number">({{ item.number }})</span>
      </span>
    </el-tab-pane>
    <!-- <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>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
  </el-tabs>
</template>

<script>
export default {
  props: {
    active: {
      type: String,
      default: "first",
    },
    tabList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeName: "first",
    };
  },
  created() {
  },
  methods: {
    handleClick(tab, event) {
      this.$emit("status", tab._props.name);
    },
  },
};
</script>

<style lang="scss" scoped >
.flex-tabs {
  background-color: red !important;
  color: red !important;
}
</style>