不过有个问题,vxe-table用到table标签,table标签的内容会均分高度,visibleList中的数据并不是完整数据,所以我们需要在首尾各添加一个div,用来填充高度 监听滚动事件我们使用vueuse的useEventListener和useThrottleFn 这里又有另一个问题,vxe-table内部就有滚动事件,因为我们的滚动事件会改变列表的数据,所以会触发vxe-tab...
vxe-table 的固定列滚动 我看到了一个vxe-table的官方例子,是一个固定列的例子,我发现当表格拥有固定列的时候,拖动滚动条,固定列会有白屏现象,但是主表格并不会有白屏现象,如下: 我看了源码,我理解应该是固定列(固定列其实也是一个表格,我称为副表格)的滚动,带动了主表格的滚动,所以主表格的滚动是被动的,导致...
* 在这里开始给vxe-table数据了 */// 1. 首先通过 $refs(vue内部方法,或者原生获取vxe-table这个dom)constVXE_TABLE=this.$refs.tableRef;// 2. 通过这个dom下挂载的方法 reloadData 方法 取数据VXE_TABLE..reloadData(list).then(()=>{// 如果你有loading的话 可以在这里关闭})// 至此, 数据接收完毕。
数据量大开启了虚拟滚动,并且同时开启了多选框 <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如下 适...
以前老版本不支持虚拟滚动动态行高,vxe-table 新版本发布后,已经可以支持虚拟滚动和动态行高了。如果需要同等行高,只需加上 show-overflow 就可以了,同等行高的渲染性能是最优的,动态行高支持的最大数量低非常多。 建议非必要的场景应该使用同等行高,特殊需求场景在使用动态行高。
* 手动清除滚动相关信息,还原到初始状态 */ 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...
要浏览器的功能是需要关闭虚拟滚动的。目前只有企业版可以支持带虚拟滚动的搜索 fourteendp commented Jul 4, 2024 你可以自定义一个 Author 729993031 commented Jul 4, 2024 @xlz26296 感觉是我们的实现方式的问题,导致浏览器不能跳转到指定的表头? tanstack-table 是支持的,可参考下面的GIF图 这部分数据是表...
vue-table版本:vxe-table 4.0+(Next) vue版本:3.0+ 遇到的问题 列设置了fixed="left", 可是在滚动中,左边的列依然是会滚动 先说原因,再说详情 原因 系统自动开启了虚拟滚动,我启用了span-method,二者应该是产生某些冲突了。导致fixed固定列效果失败。
在过往 Vue 3 业务中,VXETable 虚拟滚动表格中嵌套 ElementPlus Form 表单时,会出现表单校验不正确的问题。 业务中使用ElementPlus作为基本组件库。业务需求是在一个表格中嵌套表单,展示数据,并允许数据修改,具体如下: 回显数据有 200 条以上; 可以新增单条数据; ...
通过实验，确认问题确实与 VXETable 的虚拟滚动功能有关。关闭虚拟滚动，性能下降明显，且校验问题重现。问题根源在于虚拟滚动机制导致一次渲染的数据量减少，而 ElementPlus 的 Form 组件校验机制只针对渲染出来的数据进行。ElementPlus 的 Form 组件校验方法 `validate` 和 `validateField` 等逻辑表明，校验...