<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>
iview tab简洁写法
猜你喜欢
转载自blog.csdn.net/weixin_43843679/article/details/121227602
今日推荐
周排行