关于elementUI中Tabs组件使用v-if隐藏tab后剩余tab不显示内容的解决方案
我们在使用elementUI的Tabs的时候有时候会这样用
<template>
<el-tabs v-model="activeName">
<el-tab-pane v-if="checkTab('first')" label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane v-if="checkTab('second')" label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane v-if="checkTab('third')" label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane v-if="checkTab('fourth')" label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'second'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
checkTab(tabName) {
//判断逻辑
if(...)
return true
if(...)
return false
}
}
};
</script>
此时如果判断逻辑中隐藏了第二个tab，那整个Tabs就会没有任何tab显示在前台，所有tab都变为未选中的状态，需要点击一下后才能显示内容
解决方案如下：
<template>
<el-tabs v-model="activeName" ref=tabs>
<el-tab-pane v-if="checkTab('first')" label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane v-if="checkTab('second')" label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane v-if="checkTab('third')" label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane v-if="checkTab('fourth')" label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'second'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
checkTab(tabName) {
//判断逻辑
if(tabName == 'first'){
var self = this
setTimeout(()=>{
//手动设置显示的tab
that.$refs['tabs'].setCurrentName(tabName)
})
}
if(...)
return true
if(...)
return false
}
}
};