element
element copied to clipboard
ElemeFE
[Feature Request] Table rendering is too slow when 1000 records (hopefully you can support scrolling according to scroll bars)
Existing Component
是
Component Name
table
Description
背景：由于业务限制，用户希望直接用滚动条就能滚动所有数据。 现状：在1000条记录的情况下，表格基本卡死，操作卡顿很厉害；自己尝试通过滚动事件解决，但是由于滚动条是在表格内部，所以很难处理。 期望：可以根据总的记录条数做一下滚动加载，目前应该有不少类似的方案可以参考。 目前我们项目完全基于element UI来做的，各方面都很好用，只是目前遇到的这个问题比较严重，会影响到产品的交付。 期望能得到回复吧，谢谢。
Translation of this issue:
Existing Component
yes
Component Name
Table
Description
Background: because of business restrictions, users want to scroll directly to all the data directly.
Status: 1000 records in the case, the basic form death card, operation Caton very powerful; try to solve through the rolling events themselves, but because the scroll bar is in the form of internal, so it is difficult to deal with. Expectations: according to the total number of records to do rolling loading, there should be a lot of similar programs, you can refer to.
At present, our project is entirely based on element UI to do, all aspects are very easy to use, but this problem is encountered more serious, will affect the delivery of the product. Expect a response, thank you.
我们也是类似问题，滑动特别卡，切换路由也极慢。目前项目完全基于element UI来做的，解决方案也和楼主的期望一样。已经影响到产品的交付。
甚至因为这个，不得不在其他框架如iView啥的做对比研究。真心期望可以尽快解决，我们也升级到elementui 最新的2.0.8版本了。
以前记得有virtual scrolling技术，可以大大加强巨大数据量下的表格性能，比如slickgrid之类: https://github.com/mleibman/SlickGrid
这是slickgrid在极大数据量下的表现： This page demonstrates various techniques for optimizing DataView performance for large client-side datasets. This page displays an interactive grid with 500'000 rows with real-time filtering. https://6pac.github.io/SlickGrid/examples/example-optimizing-dataview.html
如果elementui可以把这个技术吸纳融合进来，就完美了！
I'm also having a problem with table performance, I have a page with about 5 tables (though not with a huge amount of data in each table), the time it takes on slower devices like tablets is unbearable.
I wish I could just have a loader inside the table so that the user knew something was happening, instead the whole page freezes while it tries to render all of them.
It is a problem, the table is generally not very perfomat. My band aid was to add a loader to the page, and a settimeout then add in the tables. It's not great, but I imagine in the future I'll have to just ditch the tables and write my own component when I get the time.
there are several solutions, such as "vue-virtual-scroll-list". Why not make the component "el-table" according to a similar principle? After all, it does not load.
I have experienced no problem with scrolling, I have seen serious lag though on older/slower devices (including mobile/tablets) in just loading a page with multiple tables on it. Once it loads, I have no issue, but the whole page freezes up as the component (presumably) figures out what to render.
Due to the growth of the project, and based on customer feedback, it was decided to move from a page to an endless download. We have a very complex table. Scrolling was very slow when the number of rows was 200. And the number of such lines can reach up to 5000 and even 10000. Measurement in devTools showed that the critical problems are associated with "el-table", too much time is spent on the recalculation of the lines (reached the wait up to 5 seconds). That's a lot. Therefore, the only way out was to use virtualization and remove elements from the DOM out of sight. The result on the face: the maximum wait was 3 ms.
使用transform: translateZ(0);可以解决滚动卡的问题，但是如果列表多了，多选框选中反应依旧很慢
而且开启左右列固定的话，就相当于渲染了3个表格，bodyWrapper使用transform: translateZ(0);是没什么问题，但是fixedBodyWrapper和rightFixedBodyWrapper的scrollTop是在bodyWrapper的滚动事件中去设置的，这里我暂时想不到用什么方法优化
checkbox checking in table is also very slow when there is more than 100 rows, its possible to do something with that?
以前记得有virtual scrolling技术，可以大大加强巨大数据量下的表格性能，比如slickgrid之类: https://github.com/mleibman/SlickGrid
这是slickgrid在极大数据量下的表现： This page demonstrates various techniques for optimizing DataView performance for large client-side datasets. This page displays an interactive grid with 500'000 rows with real-time filtering. https://6pac.github.io/SlickGrid/examples/example-optimizing-dataview.html
如果elementui可以把这个技术吸纳融合进来，就完美了！
table 的许多 bug 都是跟固定列有关。另外很多的 issue 都提到了 table 数据量增大造成的卡顿问题。或者按照功能，可以把 table 拆分成两类，简单的 table（保证数据量大时也不会卡顿）与带有固定列的 table。slickgrid 值得研究一下。
这个场景我也碰到了。业务需要展示大量的数据。目前iview那边有一个vue-bigdata-table的组件,但一直没人更新了。功能也不太完整。数据结构采用的二维数组。也和平时用到的业务场景不一样。所以还是希望elementui能出这样一个组件。感谢了!
