element-ui的collapse中嵌套table的問題(已解決)


近期做vue + element-ui發現了點小問題:

在collapse(折疊面板)下嵌套table,打開collapse時會出現瞬間的高度抖動,然后恢復,  詳細demo如下(一致性是修復后的正常情況, 反饋是修復前的抖動情況):

https://codepen.io/jiangguangyao/pen/qBmQJzX

問題產生原因: 在collapse關閉時table會根據collapse高度0來重新計算高度(因為table不定高度,定高度了就不會出現此問題),而在下次collapse展開的時候,collapse會首先獲取內容高度,這時候獲取的高度,是根據table父容器0計算出來的高度,有問題,等動畫做完了,父元素高度移除了,才重新計算了一邊恢復程序。

該問題在element的github上也有提問的,看了下,他們研究源碼,有個$ready屬性,值為true/false,值為false時可以取消table的高度計算監聽

使用方法: 監聽collapse綁定的值,設置當前打開的table的$ready屬性為true即可(例: this.$refs.table.$ready = true)

OK了,問題解決,完美!

注: 思路來源--github

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM