vue tab实现右定位

呈现效果

 

 

利用v-if进行判断，登页面完全加载完毕后，显示tab页，

利用name标签，实现选择哪个tab

 

<template>

　　<el-tabs v-if="display"  v-model="dateActive"   @tab-click="handleClick">

　　　　<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>

　　　　<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>

　　　　<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>

　　　　<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>

　　</el-tabs>

</template>

<script>

import { getPlan } from '@/api/index'

export default {

　　data() {

　　　return {

　　　　　editDateTabs: [],

　　　　　display: false,

　　　　 };

　　　 },

　　created() {

　　　　this.loadData()

　　},

　　methods: {

　　　loadData() {

　　　　　getPlan().then(response => {

　　　　　　　that.editDateTabs = response.data

　　　　　　　this.dateActive = that.editDateTabs[3].name

  　　　　　　this.display = true
　　　　　　})

　　　　}

　　}

 

};

</script>