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发起网络请求数据

elementUI中Tabs标签页的使用

使用vscode,新建.vue文件,tab自动生成vue代码模板

使用vscode,新建.vue文件,tab(enter)自动生成vue代码模板

android里实现一个tabhost显示怎么弄?