当前位置: 首页 > news >正文

Element-Plus,使用 El-form中 的 scroll-to-error 没有效果问题记录

因业务需要表单组件中嵌套着表格列表,内容比较多;

所以需要表单校验不通过时,自动定位到不通过的节点;

但发现这个像是没有起到效果一样,后面就是排查的思路了:

  1. 容器高度问题:如果表单容器的高度没有正确设置或者由于内容溢出导致的高度问题,可能会影响纵向滚动。

  2. CSS样式干扰:某些CSS样式,如overflow属性,可能会阻止纵向滚动。特别是如果表单容器或其父元素设置了overflow-y: hidden;,这将阻止纵向滚动。

  3. 浏览器兼容性:虽然不太可能,但仍然值得检查是否在不同的浏览器中表现一致,以排除浏览器特定的bug。

  4. Element UI版本:确保您使用的Element UI版本没有已知的关于scroll-to-error纵向滚动的bug。

以上是 AI 给的思路,但还是没有效果

那最后只能还是靠自己了;

删除了项目大部分不需要的节点,一点点尝试,最终功夫不负有心人;

原来是,每个表单需要校验的子项,里面的 prop 一定要有唯一性;

这样子就解决啦~~

假设你们那边还是无法解决,那我就给你们个兜底方案,请看:

使用类找到校验报错的节点,通过 scrollIntoView  将节点滚动到可视区;

使用以下方案,那 scroll-to-error 这个属性就不需要添加了;

    ruleFormRef.value?.validate((valid: boolean) => {
        if (valid) {
            // 校验通过执行逻辑
        } else { 
            // 不通过
            const firstError = ruleFormRef.value.$el.querySelector('.el-form-item.is-error');
            if (firstError) {
                firstError.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }
    });

相关文章:

  • openlayers结合turf geojson面获取面积和中心点
  • redis存取list集合
  • 腿足机器人之十三-强化学习PPO算法
  • 【AI+智造】用DeepSeek分析设备温度、振动、速度、加速度量化数据:南通制造业数字化转型的“智能引擎” ——基于设备全生命周期管理的开源技术方案
  • 光谱相机的市场发展趋势
  • AWS ALB 实现灰度验证指南:灵活流量分配与渐进式发布
  • Maven的传递性、排除依赖、生命周期、插件
  • 【随手笔记】RTthread软件占用资源记录
  • 阻塞赋值和非阻塞赋值
  • Rust中的异步编程:构建简单的网页爬虫
  • 多通道数据采集和信号生成的模块化仪器如何重构飞机电子可靠性测试体系?
  • 数字化赋能:制造业如何突破低效生产的瓶颈?
  • 光流法处理水流:原理与应用
  • 本地部署DeepSeek全攻略:Ollama+Chatbox保姆级教程
  • 如何使用Python编程实现捕获笔记本电脑麦克风的音频并通过蓝牙耳机实时传输
  • BIO、NIO、AIO解析
  • 【AI学习从零至壹】Numpy基础知识
  • 鸿蒙 ArkUI 实现敲木鱼小游戏
  • 2025年跟上AI新时代:带AI人工智能的蜜罐系统T-Pot
  • 介绍下pdf打印工具类 JasperPrint
  • 潘功胜:降准0.5个百分点,降低政策利率0.1个百分点
  • 起底新型保健品电话销售诈骗:从快递信息中筛选对象,忽悠其高价买药
  • 100%关税!特朗普要让美国电影100%美国制造
  • 洪纬读《制造三文鱼》丨毒素缠身的水生鸡
  • 网红“丢那猩”丢石块闯祸,起哄游客难逃责任
  • 5月1日,全社会跨区域人员流动量完成33271.4万人次