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