在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="廣告位設(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>
補充知識：element ui中table的v-show失效，但是v-if正常
v-show起作用的本質(zhì)是display:none,而因為td的display: table-cell;權(quán)限高于display:none,所以v-show失效
以上這篇在vue中使用el-tab-pane v-show/v-if無效的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項2022-12-12
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í)行回調(diào)函數(shù),所以本文給大家介紹了Vue3如何使用ResizeObserver監(jiān)聽元素的尺寸寬度變化,需要的朋友可以參考下2024-08-08
在Vue的模板語法中,我們學了很多指令,當然除了這些指令,Vue也允許我們自己定義自己的指令,所以本文就來和大家聊聊如何使用自定義指令吧2023-10-10
Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法
今天小編就為大家分享一篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。這篇文章主要介紹了一文快速詳解前端框架 Vue 最強大的功能,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue中使用微信公眾號js-sdk踩坑記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了Vue使用vue-cli創(chuàng)建項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue路由傳參三種基本方式詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12