element [Bug Report] Collapse 折叠面板组件内嵌套Table组件时,动画效果出现bug,用户体验差

wgxvkvu9  于 2022-10-23  发布在  其他
关注(0)|答案(5)|浏览(377)

Element UI version

0.1.0

OS/Browsers version

windows 7 / Google Chrome 75.0.3770.142(正式版本) (64 位)

Vue version

2.6.10

https://codepen.io/usernameddd/pen/mdJmpaw?editable=true

Steps to reproduce

进入页面之后,先点击“表格折叠面板”,此时面板将被收起/关闭,再点击“表格折叠面板”,此时面板将被展开/打开,过渡效果出现超过表格实际高度的区域然后又回到表格的实际高度。

What is Expected?

折叠面板嵌套表格能表现出正常的过渡效果,过渡效果不要超出折叠面板内容的实际高度

What is actually happening?

过渡效果超出折叠面板内容的实际高度

kse8i1jr

kse8i1jr1#

这个问题是由于Table组件的doLayout引起的,父元素隐藏显示会触发doLayout, collapse-transition.js 没有针对这种子元素动态高度的情况做处理,直接获取过渡元素的高度对于这种dom没有加载完成的元素来说,获取的scrollHeight是不准确的

ubof19bj

ubof19bj2#

请问此问题已有解决方法了么,应该如何解决?

bmp9r5qi

bmp9r5qi4#

是不是出3了,这问题不解决了?

jckbn6z7

jckbn6z75#

因为表格高度计算的问题,关闭表格高度监听可以解决,参考:

issuse comment: #13242 (comment)

blog: https://www.365seal.com/y/yQp3LZYEnZ.html

相关问题