Element: [Bug Report] el-table under collapse component

[Eflet]

Element UI version

2.4.5

OS/Browsers version

windows10 / Chrome

Vue version

2.5.16

Reproduction Link

https://jsfiddle.net/mmx38qxw/6765/

Steps to reproduce

insert an el-table into collapse component, then toggle the collapse

What is Expected?

正常打开或者关闭动画

What is actually happening?

在动画时候collapse content的高度会有个闪烁，table数据越多这个问题越严重。
卡上去像是el-table会根据父容器计算自己的宽高，然后collapse动画的时候在不断的计算。

[element-bot]

Translation of this issue:

Element UI version
2.4.5

OS/Browsers version
Windows10 / Chrome

Vue version
2.5.16

Reproduction Link
https://jsfiddle.net/mmx38qxw/6765/

Steps to reproduce
Insert an el-table into collapse component, then toggle the collapse

What is Expected?
Open or close animation

What is actually happening?
In animation, the height of collapse content will have a flicker. The more table data, the more serious this problem is.

The card that looks like an el-table calculates its width and height from the parent container, and then collapses as it animates.

[Eflet]

发现如果固定table的高度，那就没这个问题了。但是现在需求是有table有多少内容就显示多少，有没办法临时去掉table的父容器size变化的监听，等动画做完了再去刷新？或者debounce一下

[ziyoung]

看了一下 table 的代码，监听 table 尺寸的变化。但这个执行函数频率很低。

[ziyoung]

table数据越多这个问题越严重

更新了你的例子，把数据量增大：https://jsfiddle.net/mmx38qxw/6796/ 在我这边也不能重现你的问题。

[Eflet]

更新了你的例子，把数据量增大：https://jsfiddle.net/mmx38qxw/6796/ 在我这边也不能重现你的问题。

是这样的，把列里面数据内容变多
比如
test1: 'test 1 test 1 test 1',
https://jsfiddle.net/mmx38qxw/6801/
展开的时候可以明显看到滚动条抖了一下
父容器size变化的时候会触发这个table的列宽重新计算，然后算出来的table高度应该是不正确的，这个又造成父容器，collapse的content的高度计算不正确，等动画做完以后又会触发一次，这次就是正确的，就又抖回来了
现在只能用笨办法，collapse动画之前手动获取当前table高度，然后设置给父容器，动画做完再移掉

[blachworld]

@Eflet 和数据量是没有关系的，动画结束的时候，高度会向上一些。只要collapse-item 里面存在scroll-top的高度大于0的元素，貌似就会出现你说的这种现象

[Eflet]

@Eflet 和数据量是没有关系的，动画结束的时候，高度会向上一些。只要collapse-item 里面存在scroll-top的高度大于0的元素，貌似就会出现你说的这种现象

对这个就是高度计算问题，其实是collapse关闭的时候，高度变成0了，然后table监控了这个父元素，自己计算了一个高度，等下次collapse展开的时候，collapse首先获取内容高度，这时候获取的高度，是里面table根据父容器高度0计算出来的，肯定是不对的，等动画做完，父元素高度移除了，才重新计算了一遍恢复征程。
table数据越多，他计算高度时候的误差越大，我项目里面有时候甚至会collapse展开的时候展开了2倍高度，太晃眼了= =

[VirensCn]

我出现类似问题，用盒子布局，并让表头固定，表格支持滚动时，在不确定的情况下会出现一直重新计算并增加宽度，最后就是无限增加宽度。

[Eflet]

大佬们有没办法让这个table去除父容器size的监听，事实上很多情况下并不需要一直自动计算，只是初始化时候能autofit就已经很好了

[Eflet]

读源码发现有个$ready的属性，可以临时设置成false来取消监听，暂时能解决问题

[yalinyy]

这个问题有什么好的解决办法吗?我也遇到了上面的情况

[tudi2d]

I encountered the same problem (as far as I could follow the auto-translated version of your discussion above). Is there a work around or a fix for this problem yet?

[Eflet]

ElTable有个$ready的属性
我的做法就是在collapse关闭的时候，通过refs找到ElTable， 然后手动把$ready设置成false
等到collapse展开的时候，再把$ready设置成true

[Eflet]

https://jsfiddle.net/mmx38qxw/7437/
类似这样

[FangKaimo]

https://jsfiddle.net/mmx38qxw/7437/
类似这样
您好，多个折叠（手风琴）该如何设置呢？？

[taoxinyi]

@Eflet 我这边如果默认是折叠的话 第一次展开还是会闪烁 直到手动折叠再展开才停止闪烁

[FangKaimo]

@Eflet 我这边如果默认是折叠的话 第一次展开还是会闪烁 直到手动折叠再展开才停止闪烁

您也是手风琴样式的动态效果？

[Eflet]

@Eflet 我这边如果默认是折叠的话 第一次展开还是会闪烁 直到手动折叠再展开才停止闪烁

我这边是这样操作的，假如默认是收缩的状态，里面的东西第一次都用v-if隐藏起来，这样默认收缩的时候不会渲染里面的table，展开的时候才会去渲染，等第二次了就直接用$ready来控制table

[taoxinyi]

@Eflet 你好 感谢你的回复 你能再详细说下v-if和什么绑定吗？ 如果v-if和activeName绑定 第一次展开的时候似乎会出现卡顿

[Eflet]

@Eflet 你好 感谢你的回复 你能再详细说下v-if和什么绑定吗？ 如果v-if和activeName绑定 第一次展开的时候似乎会出现卡顿
是和activeName绑定
第一次的话等展开完毕再去渲染table，我是watch了activeName，然后加了个timeout

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.