vue tabs标签页的使用
Posted zhongfang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue tabs标签页的使用相关的知识,希望对你有一定的参考价值。
<template>
<div class="apply">
<div class="tabs">
<el-tabs v-model="activeName" @tab-click="handleClick" lazy=‘true‘>
<el-tab-pane label="补卡申请" name="CardApplication"></el-tab-pane>
<el-tab-pane label="请假申请" name="LeaveApplication"></el-tab-pane>
<el-tab-pane label="出差申请" name="BusinessTravel"></el-tab-pane>
<el-tab-pane label="外出申请" name="OutApplication"></el-tab-pane>
<el-tab-pane label="打车申请" name="TaxiApplication"></el-tab-pane>
<el-tab-pane label="加班申请" name="OvertimeApplication"></el-tab-pane>
</el-tabs>
</div>
<!-- 详细页面 -->
<div class="content" >
<router-view />
</div>
</div>
</template>
<script>
import {
mapGetters
} from ‘vuex‘
export default {
data() {
return {
activeName: ‘‘
}
},
computed: {
...mapGetters([
‘username‘
])
},
created() {
if(!this.$route.query.type){
this.$router.push(‘/Personal/Apply/CardApplication‘)
this.activeName = ‘CardApplication‘
}
// 判断是不是第一次进入这个页面,如果第一次进入则去CardApplication
this.activeName = this.$route.query.type || ‘CardApplication‘
},
mounted() {
// console.log(this.username)
},
methods:{
// Tabs选中时触发
handleClick(tab, event) {
this.$router.push({
path: `/Personal/Apply/${tab.name}`,
query: {
type: tab.name
}
});
}
}
}
</script>
以上是关于vue tabs标签页的使用的主要内容,如果未能解决你的问题,请参考以下文章
谁能给个element的tab标签页的标签下拉选项的demo,就是label
vue项目使用elementUI中Tabs标签页点击切换tab-click发起网络请求数据
使用vscode,新建.vue文件,tab自动生成vue代码模板