search

ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.28k stars 8.14k forks source link

🐛[BUG] proTable开启scroll，导致侧边栏伸缩卡顿 #8489

Closed hemengke1997 closed 3 years ago

hemengke1997 commented 3 years ago

🐛 bug 描述

由于无法上传gif动图，请作者脑补一下掉帧的画面

在页面中使用了proTable，数据并不太复杂，其中proTable开启rowSelection后，侧边栏伸缩会有轻微卡顿。 如果ProTable开启了scroll:{ y: someValue }, 侧边栏伸缩非常卡顿

📷 复现步骤

由于codepen复现antdPro难度较大，所以文字描述 1、安装antdPro 2、在页面中写个带 rowSelection 和 scroll 的表格（表格得有数据，不然无法复现） 3、伸缩侧边栏

🏞 期望结果

侧边伸缩不卡顿

© 版本信息

hemengke1997 commented 3 years ago

测试发现，antd的Table也会导致这种情况，开启scroll:{y: 一个小的值} 或 sticky 都会导致侧边栏伸缩卡顿，猜测是table里面做了节流处理

hemengke1997 commented 3 years ago

@xiaohuoni 小虎哥 请求帮助

chenshuai2144 commented 3 years ago

搞个复现的 repo 吧，让我们可以下下来

hemengke1997 commented 3 years ago

搞个复现的 repo 吧，让我们可以下下来

https://github.com/hemengke1997/testAntd

搞好了，可以直接复现的

xiaohuoni commented 3 years ago

另外问个问题，请问issuse是怎么上传gif的哇？

直接把 gif 丢到评论窗口就可以了。或者点下面的 “Attach files by dragging & dropping, selecting or pasting them.”

hemengke1997 commented 3 years ago

动画1

应该能感受到卡顿吧

hemengke1997 commented 3 years ago

我发现

  1. table中每列固定宽度，侧边收缩非常卡顿
  2. table随便一列不设置宽度，侧边收缩稍微卡顿
  3. table中有rowSelection，侧边收缩稍微卡顿
hemengke1997 commented 3 years ago

动画1

应该能感受到卡顿吧

@xiaohuoni @chenshuai2144 两位帅哥，请问这个issue有在考虑吗

xiaohuoni commented 3 years ago

我没有哦（已经忘了）

chenshuai2144 commented 3 years ago

你要不把 table 的宽度写死好了，这个应该是每次宽度变化table 被重新计算了。整个 table 都被渲染了

hemengke1997 commented 3 years ago

你要不把 table 的宽度写死好了，这个应该是每次宽度变化table 被重新计算了。整个 table 都被渲染了

如果每列都写死了宽度，就会很卡顿，如果剩一列不写，就还好，没那么卡..

yuexiangrong commented 3 years ago

你要不把 table 的宽度写死好了，这个应该是每次宽度变化table 被重新计算了。整个 table 都被渲染了

写死宽度是在 设置 scroll.x 吗，设置了也依然很卡

sunjiesama commented 3 years ago

你要不把桌子的宽度写死好了，这应该是每张宽度变化的桌子被重计算了。整个桌子都被渲染了。

如果每列都写死了宽度，就会很卡顿，如果剩一列不写，就还好，没那么快…… 你好，我按照上面的把scroll.x设置固定数值，并且每一列都没有宽度，依然严重卡顿，请问你解决这个问题了吗，有什么好的方案吗

sunjiesama commented 3 years ago

你要不把桌子的宽度写死好了，这应该是每张宽度变化的桌子被重计算了。整个桌子都被渲染了。

如果每列都写死了宽度，就会很卡顿，如果剩一列不写，就还好，没那么快…… 你好，我按照上面的把scroll.x设置固定数值，并且每一列都没有宽度，依然严重卡顿，请问你解决这个问题了吗，有什么好的方案吗

linghuchong-asen commented 2 years ago

你要不把 table 的宽度写死好了，这个应该是每次宽度变化table 被重新计算了。整个 table 都被渲染了

如果每列都写死了宽度，就会很卡顿，如果剩一列不写，就还好，没那么卡..

我也遇到了菜单栏折叠卡顿的问题，尝试有一列不设置宽度，能够实现不那么卡，但是没有设列宽的的那一列就会变得很宽，这个样式也不是想要的，您最后怎么解决问题的

changlin0501 commented 2 years ago

@hemengke1997 你好，请问最后你是怎么解决的这个问题呢

hemengke1997 commented 2 years ago

@hemengke1997 你好，请问最后你是怎么解决的这个问题呢

我改了ProLayout，把侧边栏收缩的transition去掉了。 antd@4.18.2 对table的收缩做了优化处理，你可以升级试试

changlin0501 commented 2 years ago

transition

@hemengke1997 你好我更新了antd还是一样的呢 ,收缩的那个应该不影响呀