不过有个问题,vxe-table用到table标签,table标签的内容会均分高度,visibleList中的数据并不是完整数据,所以我们需要在首尾各添加一个div,用来填充高度 监听滚动事件我们使用vueuse的useEventListener和useThrottleFn 这里又有另一个问题,vxe-table内部就有滚动事件,因为我们的滚动事件会改变列表的数据,所以会触发vxe-tab...
原因:开启了虚拟滚动功能 解决方法:关闭虚拟滚动 <vxe-table :scroll-x="{gt: -1}" :scroll-y="{gt: -1}" </vxe-table>
通过控制变量,我们很容易确认是滚动导致了问题,进而很容易猜测是 VXETable 的虚拟滚动功能导致了问题。 我们可以修改<vxe-table>的scroll-y属性来验证一下,我们将enabled设置成false强制禁用虚拟滚动,会发现卡顿明显了不少,而且滚动后再点击“提交”按钮不能通过校验。如果换回 ElTable,卡顿感会更为明显,同样地,滚动...
虚拟滚动启用后只会渲染指定范围内的可视区数据,其他的数据将被卷去收起,当滚动到可视区时才被渲染出来 (注:启用虚拟滚动后:show-overflow,show-header-overflow,show-footer-overflow参数将根据不同场景各自触发生效,无法取消;如果需要支持,将虚拟滚动关闭即可) 我的代码,只需要给vxe-table添加属性来关闭虚拟滚动,就...
题主是否想询问“vxetable临时合并后不支持虚拟滚动怎么解决”?虚拟滚动关闭。根据查询中关村在线显示,虚拟滚动是不支持合并,只要把高性能的虚拟滚动关闭就可以支持合并了。
在vxe-table 配置中启用虚拟滚动选项: 你需要在 vxe-table 组件上启用虚拟滚动。这通常通过设置 scroll-y 属性来完成,其中 enabled 设置为 true 表示启用虚拟滚动。 设置虚拟滚动的相关参数: 除了启用虚拟滚动外,你还需要设置一些相关参数,如滚动高度(height)、行高(itemHeight 或itemSize)等。这些参数会影响虚拟滚动...
通过控制变量和分析,很容易确认问题根源在于 VXETable 的虚拟滚动功能。关闭虚拟滚动(通过设置 scroll-y 属性为 false)后,可以看到性能显著提升,且滚动后点击“提交”按钮仍无法通过校验。对比使用标准的 ElTable 组件时的情况,关闭虚拟滚动后性能更为明显,同样存在滚动后校验不通过的问题。这证实了...
通过实验,确认问题确实与 VXETable 的虚拟滚动功能有关。关闭虚拟滚动,性能下降明显,且校验问题重现。问题根源在于虚拟滚动机制导致一次渲染的数据量减少,而 ElementPlus 的 Form 组件校验机制只针对渲染出来的数据进行。ElementPlus 的 Form 组件校验方法 `validate` 和 `validateField` 等逻辑表明,校验...
根据官方文档scroll-x的描述,这个属性是用于控制横向 虚拟滚动 的,如果要关闭则将 enabled 设置为 false 即可。不明白你所说的响应式指的是什么,你需要的属性可能是 auto-resize 以及resize-config。 有用 回复 小样: 我就是想关闭虚拟滚动,但是发现个别浏览器还是会自动缩放 回复2023-08-21 来自广东 小何: ...
官网:https://vxetable.cn/ 以前老版本不支持虚拟滚动动态行高,vxe-table 新版本发布后,已经可以支持虚拟滚动和动态行高了。如果需要同等行高,只需加上 show-overflow 就可以了,同等行高的渲染性能是最优的,动态行高支持的最大数量低非常多。 建议非必要的场景应该使用同等行高,特殊需求场景在使用动态行高。