在vue中使用el-tab-pane v-show/v-if無(wú)效的解決
更新時(shí)間：2020年08月03日 09:16:03 作者：安然于心
這篇文章主要介紹了在vue中使用el-tab-pane v-show/v-if無(wú)效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
解決方法如下：
<template>
<el-tabs v-model="settype" @tab-click="tabClick" ref="tabs">
<el-tab-pane label="廣告位設(shè)置" name="bannerset">廣告位設(shè)置</el-tab-pane>
<el-tab-pane label="推送設(shè)置" name="sendset">推送設(shè)置</el-tab-pane>
<el-tab-pane label="權(quán)限管理" name="authset">權(quán)限管理</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>
補(bǔ)充知識(shí)：element ui中table的v-show失效，但是v-if正常
v-show起作用的本質(zhì)是display:none,而因?yàn)閠d的display: table-cell;權(quán)限高于display:none,所以v-show失效
以上這篇在vue中使用el-tab-pane v-show/v-if無(wú)效的解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
混入(mixin)提供了一種非常靈活的方式，來(lái)分發(fā)vue組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)2022-12-12
elementui實(shí)現(xiàn)標(biāo)簽頁(yè)與菜單欄聯(lián)動(dòng)的示例代碼
多級(jí)聯(lián)動(dòng)是一種常見(jiàn)的交互方式,本文主要介紹了elementui實(shí)現(xiàn)標(biāo)簽頁(yè)與菜單欄聯(lián)動(dòng)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
Vue3使用ResizeObserver監(jiān)聽(tīng)元素的尺寸寬度變化
要監(jiān)聽(tīng) div 寬度的變化,可以使用 ResizeObserver 接口,ResizeObserver 允許你觀察一個(gè)或多個(gè)元素的尺寸變化,并在發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù),所以本文給大家介紹了Vue3如何使用ResizeObserver監(jiān)聽(tīng)元素的尺寸寬度變化,需要的朋友可以參考下2024-08-08
在Vue的模板語(yǔ)法中,我們學(xué)了很多指令,當(dāng)然除了這些指令,Vue也允許我們自己定義自己的指令,所以本文就來(lái)和大家聊聊如何使用自定義指令吧2023-10-10
Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法
今天小編就為大家分享一篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用。這篇文章主要介紹了一文快速詳解前端框架 Vue 最強(qiáng)大的功能,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue中使用微信公眾號(hào)js-sdk踩坑記錄，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
Vue使用vue-cli創(chuàng)建項(xiàng)目
這篇文章主要介紹了Vue使用vue-cli創(chuàng)建項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了vue路由傳參三種基本方式詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12