element Tabs标签二次封装

直接上代码

<template>
  <div class="tab-container">
    <el-tabs v-model="activeName" style="margin-top:15px;" :type="tabType" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
        <keep-alive>
            <template v-if="key=='goods'">
                <all-goods v-if="item.key=='goods'"  @create="showCreatedTimes" />
            </template>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
//这是tabPane要显示的组件
import AllGoods from '@/views/goodsManage/allGoods'
export default {
  name: 'Tab',
  props:{
    tabMapOptions:{
        type:Array,
        default:()=>{
            return []
        }
    },
    tabType:{
        type:String,
        default:'border-card'
    },
    type:{
        type:String,
        default:''
    },
    active:{
        type:String,
        default:''
    },

  },
  components: { AllGoods },
  data() {
    return {
      activeName: this.active,
      createdTimes: 0
    }
  },
  watch: {
    active(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    }
  },
  created() {
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    handleClick(tab, event){
        console.log("点击了Tabs：",tab, event);
    },
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1
    }
  }
}
</script>

<style scoped>
  .tab-container {
    margin: 30px;
  }
</style>

组件的调用

// 产品管理-产品列表
<template>
    <div class="goods-list">
        <tabs 
            :tabMapOptions='tabMapOptions' 
            :active='activeName' 
            type='goods'
            tabType='border-card' 
        >
        </tabs>
      
    </div>
</template>
<script>
import Tabs from '@/components/Tabs/tabs'
export default {
    components:{
        Tabs,
    },
    data() {
        return {
            tabMapOptions: [
                { label: '全部', key: 'ALL' },
                { label: '待开发', key: 'Info' },
                { label: '上架', key: 'Role' },
                { label: '已上架', key: 'Putaway' },
                { label: '已停售', key: 'Halt' },
                { label: '已淘汰', key: 'weedOut' },
            ],
            
             activeName: 'ALL',

        };
    },
    methods: {
        //点击tabs标签出发的方法
        handleClick(tabs){
            console.log('tabs标签:',tabs);
        }
      
    }
  };
</script>

<style lang="scss" scoped>
.goods-list {
    padding:5px 15px 15px 15px;
}
</style>

成果展示