vue + elementjs + tab

<template>
    <el-tabs class="channel-content-container" v-model="activeName" type="border-card">
        <el-tab-pane :label="channelTabs[0].label" :name="channelTabs[0].key">
            <choicenesspane v-if='activeName=="choiceness"'></choicenesspane>
        </el-tab-pane>
        <el-tab-pane :label="channelTabs[1].label" :name="channelTabs[1].key">
            <industrypane v-if='activeName=="industry"'></industrypane>
        </el-tab-pane>
        <el-tab-pane :label="channelTabs[2].label" :name="channelTabs[2].key">
            <calendarpane v-if='activeName=="calendar"'></calendarpane>
        </el-tab-pane>
        <el-tab-pane :label="channelTabs[3].label" :name="channelTabs[3].key">
            <alertspane v-if='activeName=="alerts"'></alertspane>
        </el-tab-pane>
        <el-tab-pane :label="channelTabs[4].label" :name="channelTabs[4].key">
            <articlepane v-if='activeName=="article"'></articlepane>
        </el-tab-pane>
    </el-tabs>
</template>


<script>
    import choicenesspane from './components/ChoicenessPane'
    import industrypane from './components/IndustryPane'
    import calendarpane from './components/CalendarPane'
    import alertspane from './components/AlertsPane'
    import articlepane from './components/ArticlePane'


    export default {
      components: { choicenesspane, industrypane, calendarpane, alertspane, articlepane },
      data () {
        return {
          channelTabs: [],
          activeName: 'choiceness'
        }
      },
      created () {
        this.getChannelTabs()
      },
      methods: {
        getChannelTabs () {
          this.channelTabs = [
            { label: this.$t('channel_tab.choiceness'), key: 'choiceness' },
            { label: this.$t('channel_tab.industry'), key: 'industry' },
            { label: this.$t('channel_tab.calendar'), key: 'calendar' },
            { label: this.$t('channel_tab.alerts'), key: 'alerts' },
            { label: this.$t('channel_tab.article'), key: 'article' }
          ]
        }
      }
    }
</script>


<style lang="scss">
  .channel-content-container {
    .el-tabs__content {
        overflow: visible;
    }
  }
</style>