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

 

上一篇:C语言教材答案


下一篇:CF786C-Till I Collapse【树状数组倍增,优先队列】