[Performance] [table-v2] table-v2 滚动卡动，性能问题

[JavaZWT]

Bug Type: Performance

Environment

• Vue Version: 3.3.4
• Element Plus Version: 2.3.7
• Browser / OS: Chrome/111.0.0.0/Windows 10.0
• Build Tool: Vite

Reproduction

Related Component

• el-table-v2

Reproduction Link

Demo

Steps to reproduce

1. 使用element-plus table-v2 构建复杂表格
2. header涉及多级表头，row涉及到纵向merge
3. 当横纵向表头数据较多时，滑动会很卡
4. 使用了官方demo里的 customized-header 和 Customized-row 来定义自己的行头和行的渲染
5. customized-header 和 Customized-row 的template，每次滑动或者focus任意单元格，都会触发渲染一次（通过console可以看到），感觉非常耗费性能
6. 我实际项目的表格，涉及到7层表头（表头会有合并），前6列（fixed）需要row的纵向merge（相同单元格合并），横纵向数据都比较多，滑动会很卡顿。

What is Expected?

当数据量较大时，滑动不卡顿

What is actually happening?

数据量较大时，滑动卡顿（尤其是横向维度）

Additional comments

1. 纵向维度，我可以通过分页来减少每次页面渲染的数据，但是横向目前没有比较好的方法；
2. 想了解下是否可以有相关方法可以不使用customized-header 和 Customized-row这种方式来处理，以此来避免渲染问题

感谢~

[fzxiang]

同上也有遇到这个问题，看性能分析，vue底层进行一些事件派发操作，做了各个元素更新和销毁，无从下手

[fzxiang]

同上也有遇到这个问题，看性能分析，vue底层进行一些事件派发操作，做了各个元素更新和销毁，无从下手

[lixsh8]

我也遇到表格复杂了滚动很卡，每次滚动好像都会整个重新render无论是横向还是纵向，官方可有这样的优化

[fzxiang]

我也遇到表格复杂了滚动很卡，每次滚动好像都会整个重新render无论是横向还是纵向，官方可有这样的优化

暂没有找到解决方法，遇到复杂业务，只能另辟蹊径用了另一款表格组件vxe-table，可以解决当下问题

[scvzerng]

我看了demo里面快100列了，这个虚拟表格没做完整没有横向虚拟只有纵向的也就是说你显示30条数据的话要渲染30*100的单元格列一多就卡顿

[scvzerng]

其实代码里面有预留相关的逻辑和接口的，动手能力强自己改改就行了

[fzxiang]

跟数据量无关，如果单元格是复杂的，拥有自定渲染和编辑的功能，那写在Render Function里面的逻辑就很多； 旧数据没有缓存，每一次滚动，新单元格render就重新构建一次，旧单元格被销毁掉，vue patch 多次这就造成性能瓶颈

[wangxijie001]

当某一列设置fixd时，表格行的hover效果以及表格滚动都会变得卡顿

[lorime888]

什么时候能解决啊！！！

[wxw007]

完蛋，都没办法解决这个问题了吗。。。我正卡的没办法来找方案

[scvzerng]

完蛋，都没办法解决这个问题了吗。。。我正卡的没办法来找方案

别指望了 试试ag-grid社区版基本够用了 性能很好