element-bot
commented
6 years ago Translation of this issue:
Existing Component
yes
Component Name
Table
Description
When there are too many rows and columns in the form, such as 30 columns and 1000 row data, the page will run very slowly. The memory will take up a lot and even the browser will crash directly.
This problem is caused by the display of the table, and the existing rendering is once rendered to the page at one time. When the data is very much, it will cause the browser to run slowly. I refer to some foreign form rendering methods (such as devExtreme), rendering the viewable area when rendering the virtual table (outside the viewing area of the data using the blank height / width of occupying), when the table scroll to a position, then the fact that the data is loaded out. The efficiency will be very high. Even 30 columns and 1000 data will not cause the browser card to die.
Strongly recommended: Element also introduces such a feature that allows user configuration to render forms in this way. Example: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/virtual-scrolling/
K-Wen
furybean
Existing Component
是
Component Name
Table
Description
当表格的行、列数据非常多的时候（如30列，有1000条行数据），此时，页面运行将非常缓慢，内存占用极大甚至浏览器直接崩溃。
这种问题是由于表格的显示方式造成的，现有的渲染是一次性将全部行全部列都渲染到页面上。当数据非常多的时候，会导致浏览器运行缓慢。
我参考了一些国外的表格渲染方式（如devExtreme），在渲染时可以虚拟的渲染可视区域的表格（可视区域外的数据使用空白的高度/宽度来占位），当表格滚动到某个位置的时候，再事实的将数据加载出来。这样的话效率会非常高。即使是30列、1000条数据，也不会导致浏览器卡死。
强烈建议：Element也引入这样的特性，允许用户配置使用这种方式渲染表格。
例子：https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/virtual-scrolling/