vue-vben-admin 表格能否支持下虚拟滚动?目前在渲染50条每页数据时选中所有列会明显卡顿延迟

ifmq2ha2  于 2023-03-19  发布在  其他
关注(0)|答案(9)|浏览(515)

Subject of the feature

basicTable表格支持下虚拟滚动特性

Problem

目前在渲染50条每页数据时选中所有列会明显卡顿延迟

Expected behaviour

目前在渲染50条每页数据时选中所有列会明显卡顿延迟

Alternatives

给个是否启用虚拟滚动的选项以解决表格每页数据量50+时全选列卡顿延迟的问题?

inkz8wg9

inkz8wg91#

表格每页数据量50+时全选列卡顿延迟

并没有啊,https://vvbin.cn/next/#/comp/table/treeTable

zrfyljdw

zrfyljdw2#

表格每页数据量50+时全选列卡顿延迟

并没有啊,https://vvbin.cn/next/#/comp/table/treeTable

你这个例子表格数据都是比较简单的,在我们项目中每行的数据渲染比较多就会出现这种问题,能否考虑在复杂表格数据时优化下呢?

cig3rfwq

cig3rfwq3#

较多是多少数据,建议把 vben版本号,浏览器,node版本什么都发出来,这样复现成功之后也好定位问题

krugob8w

krugob8w4#

较多是多少数据,建议把 vben版本号,浏览器,node版本什么都发出来,这样复现成功之后也好定位问题

"较多是多少数据" 我意思是表格每行要显示图片,tooltip, audio这些元素内容, 而不只是一些静态文本展示。

  • "vite": "2.5.0",
  • "vue": "3.1.5",
  • node: 12.16.0
  • chrome 版本 96.0.4664.110
oo7oh9g9

oo7oh9g96#

现在 vben 是 2.8.0,后面的更新可能已经解决了这些问题

3qpi33ja

3qpi33ja7#

现在 vben 是 2.8.0,后面的更新可能已经解决了这些问题

有没有好的vben升级建议?我安装vben官网添加源的方式直接pull下来,结果之前的好多文件都要么删了要么替换的不成样子。升级属实有些困难。

ugmeyewa

ugmeyewa8#

我以前碰到过类似的问题,当时测了一下是vue版本太低的锅,你可以试试单独升级vue能不能解决问题。

ryhaxcpt

ryhaxcpt9#

表格每页数据量50+时全选列卡顿延迟

并没有啊,https://vvbin.cn/next/#/comp/table/treeTable

你这个例子表格数据都是比较简单的,在我们项目中每行的数据渲染比较多就会出现这种问题,能否考虑在复杂表格数据时优化下呢?

vue: 3.2.21
vben: 2.7

表格中的行最右侧操作列使用 TableAction 并且开启 dropdown,当前页显示50条数据,此时全选、反选、选中某一行都很卡顿。打断点发现 ant-design-vue 的 table 在选中时直接重新渲染表格。。。这也就意味着当前行的单元格中放入的组件越多,卡顿越长,还是挺影响体验和使用的。可否新增一种table组件比如叫 dataTable 专门处理这种问题,这个table可以使用 vxe-table 或者其他可替代方案呢?

这俩天尝试自己用vxe-table魔改,但是难度较大。还是得写table的人来😥

@ anncwb

补充:
如果使用 actionColumn 开启最右侧固定列,此时拖动横向滚动条也会ant-design-table也会重新渲染表格,50条数据下卡顿也很明显

相关问题