网站建设询价公告thinkphp网站开发技术

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

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

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

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