Bug Type: Performance
Environment
- Vue Version:
3.3.4 - Element Plus Version:
2.3.12 - Browser / OS:
Google Chrome 116.0.5845.111 - Build Tool:
Vite
Reproduction
Related Component
el-table
Reproduction Link
Link
Steps to reproduce
1.创建一个多列的表格，行数 >=50 行
2.设置 transition 属性（比如 transition: width 0.3s）
3.切换 table 宽度，触发动画，页面出现明细卡顿
或者
1.进入 https://un-pany.github.io/v3-admin-vite/#/table/element-plus 页面（登录—>表格—>Element Plus）
2.选择分页组件的条数为50条
3.点击左上角缩放侧边栏的 Icon 即可缩放侧边栏，同时表格宽度也会跟着变化
4.页面出现明显卡顿
What is Expected?
动画流畅
What is actually happening?
动画卡顿
Additional comments
可能是动画过程中，table 组件一直在重复渲染样式导致的，防抖等操作似乎可以解决该问题
4条答案
按热度按时间xj3cbfub1#
对，当使用animate.css的时候，动画会卡
n8ghc7c12#
有解决嘛
mrwjdhj33#
确实，我也遇到了，我是定位的left修改，然后动画宽度变化，有table的页面卡成ppt了
aydmsdu94#
我也是，动画变化的时候，行越宽，列越多就越卡，只能通过减少每页展示的数据条数来勉强控制一下。。。