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' });
            }
        }
    });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值