Vue里使用Element UI的Tabs時el-tab-pane的隱藏和顯示

矫情吗；* 2022-02-14 11:23 1282阅读 0赞

1.效果圖

![20190426110311692.png][]

隱藏相關項后

![201904261104051.png][]

<el-tabs v-model="selectTab" ref="tabs" type="border-card" tab-position="top" @tab-click="handleTabClick"> 
                        <el-tab-pane name="0" :label="$t('main.view.tabs.tab0')" v-loading="bloading" :disabled="tabsDisabled[0]">
                            
                            <lr-detail ref="cntBody1" :columns="body_ui.body1" :grid-height="360" pagination
                                :debug="debug" @onColumnGetFocus="cntBody1_columnFocus" @onValueCheck="cntBody1_ValueValidate" @onBeforeSelect="cntBody1_BeforeSelect"
                                @onBeforeModify="cntBody1_beforeEdit" @onContextMenuItemClick="handleContextMenuItemClick_cntBody1"
                                @onDeleteRow="cntBody1_DeleteData" @onGetData="getBody1Data" @onSaveRow="cntBody1_SaveData">
                            </lr-detail>
                        </el-tab-pane>
    ....省略

在 el-tab-pane里使用v-show/v-if不生效,將el-tab-pane放在template標籤里也不生效

在研究代碼后,發現隱藏只對 el-tab-pane的子標籤(lr-detail)生效了

如圖

![20190426111257227.png][]

變成這個樣子

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70][]

這對el-tab-pane分明就是element的bug(直接隱藏頁簽選項后,頁簽看不見也就不會顯示頁簽內容了)

只能自己想辦法解決,如下

this.$refs.tabs.$children[0].$refs.tabs[2].style.display = 'none';
    this.$refs.tabs.$children[0].$refs.tabs[3].style.display = 'none';
    this.$refs.tabs.$children[0].$refs.tabs[4].style.display = 'none';
    this.$refs.tabs.$children[0].$refs.tabs[7].style.display = 'none';

$children\[0\]是所有的頁簽名稱項, $children\[1\]~$children\[n\] 是頁簽的各個子項

參考[https://www.cnblogs.com/ImaY/p/9015927.html][https_www.cnblogs.com_ImaY_p_9015927.html]

[20190426110311692.png]: /images/20220214/1573a24ead7f4576aa2d77eea0c951be.png
[201904261104051.png]: /images/20220214/f842e41b387846a2995dd631f7ff2b6f.png
[20190426111257227.png]: /images/20220214/8f86dda67ab641348de267bc8bfd9562.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70]: /images/20220214/3a3a936ba3c9406286355ce8594724ba.png
[https_www.cnblogs.com_ImaY_p_9015927.html]: https://www.cnblogs.com/ImaY/p/9015927.html