呈现效果
利用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>