1. 程式人生 > 其它 >element-ui的collapse中巢狀table的問題(已解決)

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