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

1.问题出现

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

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

2.问题截图

正常展示

错误展示

3.问题分析

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

4.问题解决

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

5.总结

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

相关推荐
程序员大阳3 小时前
副队长JavaScript教程(49)-主动抛出异常与错误类型
javascript·异常处理·error·throw·错误类型
hhhjhl3 小时前
Protobuf.js 跨端三方库仓颉适配全流程
javascript·网络·udp
康小汪3 小时前
AI 写 Vue 总写成同一个味道:给它装 Skills,装的不是知识是边界
前端·vue.js·人工智能·ai编程·最佳实践
智能运维指南4 小时前
研制过程“两张皮“怎么破:研制一体化支撑平台的定位、能力边界与落地前提
java·前端·人工智能·嘉为蓝鲸
白山编程大哥5 小时前
Java 后端如何优雅地把 List 集合返回给前端
java·前端·list
Flynt6 小时前
我把热榜那篇"禁用 axios"逐条实测了一遍:结论大体对,坑在它没讲的地方
前端·javascript·axios
Csvn7 小时前
bundle优化
前端
slongzhang_7 小时前
linux 递归删除源码文件|递归删除目录下 *.js,但排除 *.min.js
linux·开发语言·javascript
北冥有鱼7 小时前
发版后动态路由点击报 `Failed to fetch dynamically imported module`」问题上的完整排查与修复过程
前端·vue.js
静默回滚7 小时前
视频压到 25 MB 以内,码率要算、音轨要扣、余量要留
前端