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

1.问题出现

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

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

2.问题截图

正常展示

错误展示

3.问题分析

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

4.问题解决

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

5.总结

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

相关推荐
右耳朵猫AI几秒前
JavaScript技术周刊 2026年第20周
开发语言·javascript·ecmascript
Cobyte13 分钟前
15.响应式系统比对:链表在 Preact Signals 响应式系统中的应用
前端·javascript·vue.js
KaMeidebaby17 分钟前
卡梅德生物技术快报|基因测序技术在 46,XY 性发育障碍变异筛查中的流程与数据分析
服务器·前端·数据库·人工智能·算法·数据挖掘·数据分析
ZengLiangYi18 分钟前
SourceAdapter 插件架构详解
javascript·算法·架构
m0_7381207228 分钟前
渗透测试基础——黑盒测试下的Web漏洞挖掘与利用解析(二)
服务器·前端·python·网络协议·安全·网络安全
weixin_4296302629 分钟前
3.50 WebARNav:边缘辅助视觉定位的移动Web AR室内导航
前端·ar
ZengLiangYi35 分钟前
如何解析 5 种完全不同格式的 AI 对话
javascript·人工智能·算法
yivifu38 分钟前
CSS 自动级联编号有序列表完全指南
前端·css·c#·html·有序列表·级联编号
李白的天不白1 小时前
pnpm
前端
jay神1 小时前
基于 Python + Flask + Vue 的校内求职互助平台
前端·vue.js·后端·python·flask·毕业设计