最近開發(fā)項目時，在 el-tab-pane 標簽上使用 v-show，即使?v-show?的值為 false，el-tab 的標簽仍然展示。即使將?v-show?加在 slot 子節(jié)點上，也會顯示 tab 的背景圖和 close 圖標；如下圖：

所以針對該問題，各種方案做了一個嘗試，下面做一個總結(jié)，希望對你有幫助。

方案一：可以使用使用 v-if，親測有效。

但是有些場景下不適合使用 v-if，比如切換比較頻繁，并且需要保留之前的狀態(tài)等

方案二：

注意觀察 tab 的 dom 結(jié)構(gòu)，你會發(fā)現(xiàn) el-tab-pane 會生成一個唯一 id，id 的值就是 tab- 加上 name 屬性的值。

watch:{
	'會改變的值'(val){
        if(xxxxx){
            // 根據(jù)條件判斷、如果需要隱藏，則獲取到 id 后設(shè)置 style 的 display 為 none
            document.getElementById(`tab-${需要設(shè)置的 tab 的 name}`).style.display = 'none';
        } else {
            // 如果需要顯示、則獲取到 id 后設(shè)置 style 的 display 為 inline-block
            document.getElementById(`tab-${需要設(shè)置的 tab 的 name}`).style.display = 'inline-block';
        }
	}
}

方案三：

原理類似方法二，使用this.$refs.tabs.$children[0].$refs.tabs獲取到 dom 元素后修改樣式

在 el-tabs 元素上加上 ref：

this.$refs.tabs.$children[0].$refs.tabs?獲取到的值：所有 tab 頁簽 dom 元素的集合。如下圖：

 watch: {
        tabActive: {
            handler(val) {
                // this.$refs.tabs.$children[0].$refs.tabs 獲取到的就是所有的 tab 頁簽 dom 元素的集合
                // 遍歷之后，item.id 就是 div 元素的 id 屬性
                // 里面會有 tab 對應(yīng)的 id 值，判斷 id 是否包含頂部頁簽的值，關(guān)聯(lián)上
                // 再設(shè)置 style 是否顯示與隱藏
                let tabList = this.$refs.tabs.$children[0].$refs.tabs;
                tabList && tabList.map(item => {
                    if (!item.id.includes(this.srcTabActive + val)) {
                        item.style.display = 'none';
                    } else {
                        item.style.display = 'inline-block';
                    }
                });
        },
        deep: true
    }
},

以上就是解決 ElementUI 中的 el-tab-pane 組件使用 v-show 不生效的問題的三種方案，希望對大家有用，感謝閱讀。文章來源地址http://www.zghlxwxcb.cn/news/detail-803121.html

到了這里，關(guān)于如何解決ElementUI中的el-tab-pane組件使用v-show不生效的問題？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！