监听滚动事件我们使用vueuse的useEventListener和useThrottleFn 这里又有另一个问题,vxe-table内部就有滚动事件,因为我们的滚动事件会改变列表的数据,所以会触发vxe-tabl的滚动事件,然后这两个滚动事件会不断互相触发,所以我们需要一个变量记录最后滚动的高度,无变化就不做任何操作,直接返回 实现 设置样式 offscreenList...
一开始我觉得是不是因为默认开启了虚拟滚动,所以在滚动的时候需要去计算下一次的渲染,计算是需要过程的,所以导致了短暂的白屏,所以我马上把虚拟滚动关了~但结果还是老样子,所以排除虚拟滚动这个原因~ 虽然虚拟滚动也会导致白屏,但是vxe-table有预渲染的功能,所以问题不大 跟表格组件有关? 那是不是只有vxe-table有这...
数据量大开启了虚拟滚动,并且同时开启了多选框 <vxe-table:scroll-x="tableScrollXConfig":scroll-y="tableScrollYConfig":loading="loading":data="tableData"><vxe-column type="seq"width="70"></vxe-column></vxe-table> 1. 2. 3. 4. 5. 6. 7. 8. 解决方案:降低渲染频率,配置scroll-y如下 适...
官方地址:https://vxetable.cn/#/table/start/install 最高支持10w+数据的流畅滚动。确实厉害。 那么这么厉害的虚拟滚动,如何实现? 官方也一语道破。 没错,就是懒加载。界面上只是在窗口可视区域范围内加载数据,随着鼠标滚动,再继续加载下一波数据。 怎么用? 第一,写下table模板 <vxe-table border show-overflo...
可复现的链接: 无 问题描述与截图: 以下为大致描述 1.表格开启虚拟滚动 2.查看html元素(此时只有:1-16行元素) 3.将table滚动到最后一行(例:250行) 4.切换系统中的Tab页签并切换回Table页 5.查看html元素(会显示1-250行所有html元素) 期望的结果: 能帮忙处理一下
* 手动清除滚动相关信息,还原到初始状态 */ clearScroll () { const $refs = this.$refs const tableBody = $refs.tableBody const { $refs } = this const { tableBody, rightBody, tableFooter } = $refs const tableBodyElem = tableBody ? tableBody.$el : null const tableFooter = $refs.table...
目前时间是 2021-5-31,后面如果距离这个时间段比较远了,不排除作者已经修复了这个问题 vue-table版本:vxe-table 4.0+(Next) vue版本:3.0+ 遇到的问题 列设置了fixed="left", 可是在滚动中,左边的列依然是会滚动 先说原因,再说详情 原因 系统自动开启了虚拟滚动,我启用了span-method,二者应该是产生某些冲突了。
通过实验,确认问题确实与 VXETable 的虚拟滚动功能有关。关闭虚拟滚动,性能下降明显,且校验问题重现。问题根源在于虚拟滚动机制导致一次渲染的数据量减少,而 ElementPlus 的 Form 组件校验机制只针对渲染出来的数据进行。ElementPlus 的 Form 组件校验方法 `validate` 和 `validateField` 等逻辑表明,校验...
通过控制变量和分析,很容易确认问题根源在于 VXETable 的虚拟滚动功能。关闭虚拟滚动(通过设置 scroll-y 属性为 false)后,可以看到性能显著提升,且滚动后点击“提交”按钮仍无法通过校验。对比使用标准的 ElTable 组件时的情况,关闭虚拟滚动后性能更为明显,同样存在滚动后校验不通过的问题。这证实了...
3,横向虚拟滚动不支持分组表头,4,当渲染复杂固定列时,同步滚动会有延迟,具体由渲染的复杂度决定 5.按钮导入导出,样式错乱,导出pdf报错等其他问题 参考:https://wenku.baidu.com/view/6107b7deadf8941ea76e58fafab069dc50224779.html 兼容性: 3.0版本以后不支持IE ...