近期做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