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绑定的值(或者在那个change方法中),设置当前打开的table的$ready属性为false即可(例: this.$refs.table.$ready = false)

OK了,问题解决,完美!

注: 思路来源--github. https://github.com/ElemeFE/element/issues/13242

 

posted @ 2021-08-09 13:46  程序员笔记--vue  阅读(1965)  评论(4编辑  收藏  举报