列太多vxe-table自动启用横向虚拟滚动引起的bug

1.问题出现

提交页面用于展示物资明细内容的地方是调用vxe-table组件渲染的,并且支持某些字段可编辑,可编辑的字段加了必填校验和一些其他校验,点击保存的时候必填字段如果没有填写,会自动定位到校验不通过的字段,并且输入框会自动获取焦点,后面某个迭代增加了几个字段,点击保存的时候必填校验出现如下问题:

  1. 没有自动定位到校验不通过的字段
  2. 输入框不会自动聚焦

2.问题截图

正常展示

错误展示

3.问题分析

考虑到变动只是新加了几个字段展示,于是我注释了新加的字段,果然校验正常了,由此想到可能是vxe-table插件本身导致的,然后想到vxe-table插件最重要的特性就是通过开启横向和纵向的虚拟滚动支持大数据的渲染而不卡顿,难道是因为新加了字段后导致列太多触发了横向虚拟滚动开启,刚好加了校验的字段初始加载的时候不在表格可视化区域,所以导致出现该问题。

4.问题解决

既然知道原因了那就好办,直接添加属性手动禁用横向虚拟滚动。如下图:

5.总结

手动禁用横向虚拟滚动说到底还是会牺牲掉部分性能的,最好还是从产品层面解决,比如:去掉部分非必须展示的字段或者尽量把可编辑字段放在表格前面展示。

相关推荐
Mike_jia12 小时前
ZbxTable:Zabbix开源报表神器,从运维数据到决策洞察的最后一公里
前端
LinXunFeng1 天前
Obsidian - 使用 Share Note 分享笔记并自部署
前端·笔记·github
乘风gg1 天前
为什么AI 时代来临,大部分人吃不到红利
前端·ai编程·claude
恋猫de小郭1 天前
Android 限制侧载新进展,谷歌联合国内厂商推验证计划
android·前端·flutter
IT_陈寒1 天前
Redis内存爆了,原来我漏掉了这个致命配置
前端·人工智能·后端
恋猫de小郭1 天前
解读 Android 17 全新内存限制,有没有“豁免”后门?
android·前端·flutter
Hyyy1 天前
理解LLM的基本工作原理:预训练、微调、推理的区别
前端
Gatlin1 天前
前端逆向与反逆向:一场猫鼠游戏的底层逻辑与实战
前端
代码煮茶1 天前
React 组件封装方法论 —— 以 Todo App 为例
javascript·react.js
Pedantic1 天前
本地通知(Local Notifications)学习笔记
前端