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

1.问题出现

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

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

2.问题截图

正常展示

错误展示

3.问题分析

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

4.问题解决

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

5.总结

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

相关推荐
极梦网络无忧19 分钟前
基于 Vite + Vue3 的组件自动注册功能
前端·javascript·vue.js
Predestination王瀞潞32 分钟前
5.4.3 通信->WWW万维网内容访问标准(W3C):WWW(World Wide Web) 协议架构(分层)
前端·网络·网络协议·架构·www
爱学习的程序媛42 分钟前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验
zabr43 分钟前
花了 100+ 篇笔记,我整理出 了一套 AI Agent 工程完全指南
前端·后端·agent
软弹1 小时前
深入理解 React Ref 机制:useRef 与 forwardRef 的协作原理
前端·javascript·react.js
YaHuiLiang1 小时前
Ai Coding浪潮下的前端:“AI在左,裁员在右”
前端
雪碧聊技术1 小时前
前端vue代码架子搭建
前端·javascript·vue.js·前端项目代码框架搭建
爱学习的程序媛1 小时前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
han_1 小时前
JavaScript设计模式(二):策略模式实现与应用
前端·javascript·设计模式
x***r1511 小时前
Notepad++ 8.6 安装教程:详细步骤+自定义安装路径(附注意事项)
linux·前端·javascript