iview tab简洁写法

<template>
    <div class="tab-content">
      <Tabs :value="currentTab" @on-click="changeTab" style="background-color: white" v-if="menuList.length">
        <TabPane
          v-for="(item,index) in menuList"
          :key="index"
          :label="item.name"
          :name="item.routeName"
        ></TabPane>
      </Tabs>

      <component :is="currentView" v-if="currentView"></component>
    </div>
</template>

<script>
import Transfer from './transfer.vue';
import History from './history.vue';

export default {
    components: { Transfer, History },

    data() {
      return {
        menuList: [
          {
            name: '数据迁移',
            routeName: 'passenger-flow-transfer',
            // accessKey: ''
          },
          {
            name: '数据迁移记录',
            routeName: 'passenger-flow-history',
            // accessKey: ''
          }
        ],
        currentView: '',
        currentTab: ''
      };
    },  

    created() {
      this.menuList[0] && this.changeTab(this.menuList[0].routeName);
    },   

    mounted() {},
    
    methods: {
      changeTab(item) {
        this.currentTab = item;

        switch(item) {
          case 'passenger-flow-transfer':
            this.currentView = 'Transfer';
            break;
          case 'passenger-flow-history':
            this.currentView = 'History';
            break;
        }
      }
    },
};
</script>
<style scoped lang="scss">
/deep/ .ivu-tabs-nav .ivu-tabs-tab {
    font-size: 13px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #333333;
    padding: 12px 16px;
}
/deep/ .ivu-tabs-nav .ivu-tabs-tab-active {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    color: #000000;
}
/deep/.ivu-tabs-ink-bar {
    width: 30px;
    height: 4px;
    border-radius: 2px;
    width: 20px !important;
    left: 40px;
}
.tab-content {
    height: 100%;
    min-width: 1300px;
    background-color: #fff;
}
</style>