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