vue-vben-admin icon indicating copy to clipboard operation
vue-vben-admin copied to clipboard

Table加载大数据时,会出现卡顿明显。

Open Sxen77 opened this issue 2 years ago • 5 comments

描述 Bug

生产环境,5W条数据,每页15条数据,请出后端后分页3600多页。实际API返因的每次请求是15条数据,并返回总条数,这时出现明显卡顿。因为其它栏目几千条数据时,感觉不到卡顿,所以考虑是后端问题。所以也进行后端的优化,但更改返回的默认参数items为其它时,实际后端返回的数据时间是与其它一样的。只要不渲染到表格,就不会卡顿,只要一渲染就卡顿,前端尝试去掉加载、调整分页。都还是加载缓存,加载完后卡顿。 API请求: image

但实际页面完全加载完成需要 6 秒时间

表格加载了24000多个tb元素

系统信息

  • 操作系统: windows 10
  • Node 版本:
  • 包管理器 (npm/yarn/pnpm) 及其版本: yarn

Sxen77 avatar Apr 19 '22 06:04 Sxen77

在columns里参数使用了slots,而这个参数因为需要返回多行不同的数据所以返回是数组,去掉数组使用字符串就正常了。而现在这个参数的数组里也只有一行数据。所以也不知道是那里原因。

Sxen77 avatar Apr 19 '22 06:04 Sxen77

#1816 参考

DreamBuddy avatar Apr 21 '22 05:04 DreamBuddy

根本问题是ant design table会真的去一次性绘制5w行真实dom,导致当前页假死... 解决方案就是使用虚拟table,不展示的元素不会立即绘制

DreamBuddy avatar Apr 21 '22 08:04 DreamBuddy

更改返回的默认参数items为其它

请问楼主这个怎么配置?

jacklu2016 avatar Aug 02 '22 02:08 jacklu2016

更改返回的默认参数items为其它

请问楼主这个怎么配置? 在整个项目搜索listField: 'items', 修改items为你想的

DreamBuddy avatar Aug 02 '22 02:08 DreamBuddy

已经引入vxe-table 大数据渲染可使用它

wangjue666 avatar Sep 28 '23 07:09 wangjue666