el-popover中使用el-tabs的樣式顯示問題

筆者最近在寫一個管理後臺的項目，技術棧選的是vue+element-ui。有一個需求是在一個表格的操做欄中點擊按鈕展現出價記錄和入場券記錄，以下圖所示

產品的原意應該是讓我用dialog對話框來作，但筆者以爲對話框過重了，想用一個更加輕量的組件popover。看了下官方文檔，官方已經給出了popover中嵌套table的demo，ctrl+c、ctrl+v，美滋滋。本身只須要在官方demo的基礎上再加個el-tabs組件就能夠了。代碼寫完了一跑，發現el-tabs組件的tab-bar沒顯示出來。下圖左邊是實際展現效果，右邊是正常應該展現的效果。

問題分析

問題緣由有兩點：

• el-popover利用display屬性來控制popover框的顯示和隱藏
• el-tabs中tab-bar的屬性經過計算tab的物理寬高得到

這兩個組件單獨使用不會有問題。但組合使用時，當popover框處於隱藏狀態時，el-tabs中tab的物理寬高都爲0。進而致使tab-bar的屬性計算異常。

解決方案

簡單介紹下解決思路。要解決這個問題，主要就是要解決如何在隱藏狀態下獲取tab的物理寬高。說到這裏，有經驗的同窗可能已經想到了用visibility:hidden來隱藏組件。但這個方式有一個問題，被隱藏的組件會影響文檔佈局。因此再加一個position:absolute，使組件脫離文檔流。

總結下解決方案，就是將el-popover的隱藏方式從display:none改爲visibility:hidden;position:absolute。

筆者已將這個解決方案提了個pull request給element，但願能被merge。

但筆者眼前的問題仍是沒有解決，element官方接不接受個人pr還不必定呢。就算未來能接受，那如今一時半會兒也用不上。得有一個臨時解決方案填這個坑。

臨時解決方案

方案一

將el-popover組件的源碼複製出來，寫一個自定義的組件，並修改隱藏方式。在項目中引入自定義組件來替代el-popover。

方案二

利用el-popover的show事件和after-enter事件，在顯示觸發時將el-tabs綁定的model置空，在顯示完成時爲model從新賦值。原理是經過改變el-tabs的model值，觸發tab-bar從新計算style屬性。

筆者項目中用的就是方案二，由於方案二隻要加兩行代碼就能搞定，方案一要多寫好多代碼。