elementUI の Tabs コンポーネントが v-if を使用してタブを非表示にした後、残りのタブにコンテンツが表示されない問題の解決策
elementUI タブを使用する場合、このように使用することがあります。
<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>
このとき、判定ロジックで2番目のタブが非表示になっていると、タブ全体で最前面に表示されるタブがなくなり、すべてのタブが選択解除され、コンテンツをクリックする必要があります。
解決策は次のとおりです。
<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
}
}
};