因業務需要表單組件中嵌套著表格列表,內容比較多;
所以需要表單校驗不通過時,自動定位到不通過的節點;
但發現這個像是沒有起到效果一樣,后面就是排查的思路了:
容器高度問題:如果表單容器的高度沒有正確設置或者由于內容溢出導致的高度問題,可能會影響縱向滾動。
CSS樣式干擾:某些CSS樣式,如
overflow
屬性,可能會阻止縱向滾動。特別是如果表單容器或其父元素設置了overflow-y: hidden;
,這將阻止縱向滾動。瀏覽器兼容性:雖然不太可能,但仍然值得檢查是否在不同的瀏覽器中表現一致,以排除瀏覽器特定的bug。
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' });}}});