vxe-table的虚拟滚动是一种用于处理大数据量表格渲染的技术,它通过仅渲染可视区域内的数据行来避免一次性渲染整个表格数据所导致的性能问题。虚拟滚动可以显著提高大数据量表格的渲染效率和用户体验,支持多达30万行数据的流畅滚动。 vxe-table如何实现虚拟滚动 vxe-table通过内部机制自动处理虚拟滚动的逻辑,用户只需在表格...
监听滚动事件我们使用vueuse的useEventListener和useThrottleFn 这里又有另一个问题,vxe-table内部就有滚动事件,因为我们的滚动事件会改变列表的数据,所以会触发vxe-tabl的滚动事件,然后这两个滚动事件会不断互相触发,所以我们需要一个变量记录最后滚动的高度,无变化就不做任何操作,直接返回 实现 设置样式 offscreenList...
以前老版本不支持虚拟滚动动态行高,vxe-table 新版本发布后,已经可以支持虚拟滚动和动态行高了。如果需要同等行高,只需加上 show-overflow 就可以了,同等行高的渲染性能是最优的,动态行高支持的最大数量低非常多。 建议非必要的场景应该使用同等行高,特殊需求场景在使用动态行高。 <template><div><vxe-button@click=...
跟虚拟滚动有关吗? 一开始我觉得是不是因为默认开启了虚拟滚动,所以在滚动的时候需要去计算下一次的渲染,计算是需要过程的,所以导致了短暂的白屏,所以我马上把虚拟滚动关了~但结果还是老样子,所以排除虚拟滚动这个原因~ 虽然虚拟滚动也会导致白屏,但是vxe-table有预渲染的功能,所以问题不大 跟表格组件有关? 那是不...
vue最强table vxe-table 虚拟滚动列表 前端导出 最近遇到个问题。后台一次性返回2万条列表数据。 并且需求要求所有数据必须全部展示,不能做假分页(不能优化了)。 这些数据的直接来源就是CS客户端。 他们做CS客户端就是一次性加载几万条数据不分页(说这是客户的要求)。
vxe-table开启多选框之后滚动错位问题,数据量大开启了虚拟滚动,并且同时开启了多选框<vxe-table:scroll-x="tableScrollXConfig":scroll-y="tableScrollYConfig":loading="loading":data="tableData">
可复现的链接: 无 问题描述与截图: 以下为大致描述 1.表格开启虚拟滚动 2.查看html元素(此时只有:1-16行元素) 3.将table滚动到最后一行(例:250行) 4.切换系统中的Tab页签并切换回Table页 5.查看html元素(会显示1-250行所有html元素) 期望的结果: 能帮忙处理一下
我的代码,只需要给vxe-table添加属性来关闭虚拟滚动,就可以了。 当然,性能方面嘛,妥协一下啦。数据少时,用户无感的 关键属性: :scroll-x="{enable: false, gt: -1}":scroll-y="{enable: false, gt: -1}" 完整一点的代码是: <vxe-table:data="tableData":scroll-x="{enable: false, gt: -1}":...
在过往 Vue 3 业务中,VXETable 虚拟滚动表格中嵌套 ElementPlus Form 表单时,会出现表单校验不正确的问题。 业务中使用ElementPlus作为基本组件库。业务需求是在一个表格中嵌套表单,展示数据,并允许数据修改,具体如下: 回显数据有 200 条以上; 可以新增单条数据; ...
表格开启虚拟滚动,滚动到底的时候,数据加载完成,滚动条会会回到顶部 #2371 zgnation opened this issue Apr 27, 2024· 1 comment Labels bug Comments zgnation commented Apr 27, 2024 可复现的链接: 线上项目不支持链接 问题描述与截图: 162dab672f30da4f38e27f2a9a70a09e.mp4 期望的结果: 滚动条...