在vue中使用el-tab-pane v-show/v-if無效的解決
更新時間:2020年08月03日 09:16:03 作者:安然于心
這篇文章主要介紹了在vue中使用el-tab-pane v-show/v-if無效的解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了,大家還是直接看代碼吧~
解決方法如下:
<template>
<el-tabs v-model="settype" @tab-click="tabClick" ref="tabs">
<el-tab-pane label="廣告位設置" name="bannerset">廣告位設置</el-tab-pane>
<el-tab-pane label="推送設置" name="sendset">推送設置</el-tab-pane>
<el-tab-pane label="權限管理" name="authset">權限管理</el-tab-pane>
<el-tab-pane label="紅包配置" name="redpoketset">紅包配置</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
settype: 'bannerset'
};
},
methods: {
tabClick(tab, event) {
console.log(tab, event);
//this.hideTabs(tab);
},
hideTabs(idx) {
this.$refs.tabs.$children[idx].$el.style.display = 'none';
}
},
mounted () {
this.hideTabs();
}
}
</script>
補充知識:element ui中table的v-show失效,但是v-if正常
v-show起作用的本質是display:none,而因為td的display: table-cell;權限高于display:none,所以v-show失效

以上這篇在vue中使用el-tab-pane v-show/v-if無效的解決就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
elementui實現(xiàn)標簽頁與菜單欄聯(lián)動的示例代碼
多級聯(lián)動是一種常見的交互方式,本文主要介紹了elementui實現(xiàn)標簽頁與菜單欄聯(lián)動的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-06-06
Vue3使用ResizeObserver監(jiān)聽元素的尺寸寬度變化
要監(jiān)聽 div 寬度的變化,可以使用 ResizeObserver 接口,ResizeObserver 允許你觀察一個或多個元素的尺寸變化,并在發(fā)生變化時執(zhí)行回調函數,所以本文給大家介紹了Vue3如何使用ResizeObserver監(jiān)聽元素的尺寸寬度變化,需要的朋友可以參考下2024-08-08
Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法
今天小編就為大家分享一篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08

