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

1.问题出现

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

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

2.问题截图

正常展示

错误展示

3.问题分析

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

4.问题解决

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

5.总结

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

相关推荐
ss2739 分钟前
AI全栈实战 | 3.5-01 Python 全栈前端最小集:不会 React 也能做出能看的后台,关键就一条线
前端·python·react.js
人工智能培训12 分钟前
数字孪生驱动大模型工业知识库:为具身机器人植入领域专业经验
大数据·linux·服务器·前端·人工智能
维克兜率天26 分钟前
【维克】通道突破:画出趋势的“轨道线“
前端·数据库·人工智能
Ai-_Man27 分钟前
从聊天框到正式文档:AI导出鸭瞄准AI大模型应用的“最后一公里”
开发语言·前端·javascript·人工智能·小程序
乌暮35 分钟前
拆解网页的底层逻辑:用费曼学习法讲透 HTML 与 CSS
前端·css·学习·html
专业程序开发源38 分钟前
springboot酒店会员点餐系统22339-计算机课程设计、毕业设计
java·javascript·vue.js·spring boot·后端·php·课程设计
panxianren8 小时前
Bun 1.4 的 bun test --parallel 将 4 秒的测试套件缩短到约 1 秒
java·javascript
陈随易10 小时前
bm2,Node.js 与 Bun 项目部署新选择
前端·后端·程序员
可乐鸡翅yeah_11 小时前
FFmpeg 生成 HLS 独立分片 independent‑segments 参数到底有什么用
javascript·ffmpeg·音视频·safari·m3u8
福兮说11 小时前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas