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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/70945.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/70945.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/70945.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

基于Javase的停車場收費管理系統

基于Javase的停車場收費管理系統 停車場管理系統開發文檔 項目概述 1.1 項目背景 隨著現代化城市的不斷發展,車輛數量不斷增加,停車難問題也日益突出。為了更好地管理停車場資 源,提升停車效率,需要一個基于Java SE的停車場管理…

網絡協議 HTTP、HTTPS、HTTP/1.1、HTTP/2 對比分析

1. 基本定義 HTTP(HyperText Transfer Protocol) 應用層協議,用于客戶端與服務器之間的數據傳輸(默認端口 80)。 HTTP/1.0:早期版本,每個請求需單獨建立 TCP 連接,效率低。HTTP/1.1&…

DeepSeek掘金——調用DeepSeek API接口 實現智能數據挖掘與分析

調用DeepSeek API接口:實現智能數據挖掘與分析 在當今數據驅動的時代,企業和開發者越來越依賴高效的數據挖掘與分析工具來獲取有價值的洞察。DeepSeek作為一款先進的智能數據挖掘平臺,提供了強大的API接口,幫助用戶輕松集成其功能到自己的應用中。本文將詳細介紹如何調用D…

LabVIEW同步數據采集功能

VI通過使用數據采集(DAQ)硬件系統,進行多通道同步采集,實時獲取模擬信號數據。它利用外部時鐘信號觸發數據采集,支持連續采樣模式,并將采集到的數據實時顯示在波形圖上,方便用戶進行數據監控和分…

SpringDataJPA使用deleteAllInBatch方法邏輯刪除失效

概述 在使用Spring Boot JPA時,執行批量刪除操作時,遇到邏輯刪除失效的問題。具體而言,當使用deleteAllInBatch方法時,數據會被物理刪除,而不是進行邏輯刪除;但是當使用deleteAll時,邏輯刪除操…

【Docker】使用Docker搭建-MySQL數據庫服務

零、更換Docker鏡像源 因為國內現在封鎖了Docker默認拉取鏡像的站點(DockerHub),而且國內大部分Docker鏡像站已全部下線,導致現在很多朋友在拉取鏡像的時候會出現無法拉取的現象,這時候就需要進行更換Docker鏡像源。 可…

人類駕駛的人腦兩種判斷模式(反射和預判)-->自動駕駛兩種AI模式

一種模式是直覺模式,判斷基于條件反射,視覺感知 觸發到 直接條件反射(從經歷中沉淀形成的神經信息閉環),類似現在自動駕駛技術的傳統AI模式;另一種是圖式推理模式,判斷是基于預判,人…

3.17 AI Agent 場景革命:解鎖企業級應用的 15 個黃金賽道

AI Agent 場景革命:解鎖企業級應用的 15 個黃金賽道 關鍵詞:AI Agent 應用場景, 企業級智能體案例, 多模態 Agent 實現, 工具鏈自動化, 智能決策系統 1. 企業級 Agent 場景分類圖譜 #mermaid-svg-UjUmmToEKigfdlFf {font-family:"trebuchet ms",verdana,arial,san…

Docker基礎-常見命令

docker images -查看所有的本地鏡像。 docker pull -把遠端鏡像拉取到本地。 docker rmi -刪除鏡像。 docker push -推到鏡像倉庫。 docker run -創建并運行容器(自動化,如果發現鏡像不存在會先去拉取, 拉取完了以后再去自動創建容器&am…

TinyEngine v2.2版本發布:支持頁面嵌套路由,提升多層級路由管理能力開發分支調整

2025年春節假期已過,大家都帶著慢慢的活力回到了工作崗位。為了讓大家在新的一年繼續感受到 Tiny Engine 的成長與變化,我們很高興地宣布:TinyEngine v2.2版本正式發布!本次更新帶來了重要的功能增強------頁面支持嵌套路由&#…

LSTM長短期記憶網絡-原理分析

1 簡介 概念 LSTM(Long Short-Term Memory)也稱為長短期記憶網絡,是一種改進的循環神經網絡(RNN),專門設計用于解決傳統RNN的梯度消失問題和長程依賴問題。LSTM通過引入門機制和細胞狀態,能夠更…

SQL Server 中遇到的常見問題集

SQL Server 中遇到的常見問題集 問題一: 無法創建關系“FK_Research_Teacher”。 ALTER TABLE 語句與 FOREIGN KEY 約束"FK_Research_Teacher"沖突 解決方法: 外鍵表中的數據主鍵表中是有的,并且不能刪除主外鍵表中數據 1&…

神經網絡中感受野的概念和作用

在神經網絡中,感受野(Receptive Field)是指某個神經單元(神經元或者卷積核)關注的輸入特征區域的大小。它決定了神經網絡對輸入數據的特定區域的感知能力。 感受野的形成過程 在卷積神經網絡中,卷積層是感受…

unreal engine gameplay abiliity 獲取ability的cooldown剩余時間

unreal engine gameplay abiliity 獲取ability的cooldown 版本 5.4.4 參考 測試代碼 if (HasAuthority() && AbilitySystemComponent){TArray<FGameplayAbilitySpecHandle> OutAbilityHandles;AbilitySystemComponent->GetAllAbilities(OutAbilityHandles…

【leetcode hot 100 42】接雨水

錯誤解法&#xff1a;若height[left]>height[right]則代表有坑 class Solution {public int trap(int[] height) {int left 0;int area 0;while(left<height.length-1){// 找坑int right left1;while(right<height.length-1 && height[left]>height[ri…

Spark map與mapPartitions算子源碼級深度解析

Spark map與mapPartitions算子源碼級深度解析 一、核心源碼結構差異 1. map算子實現邏輯 def map[U: ClassTag](f: T => U): RDD[U] = withScope {val cleanF = sc.clean(f)new MapPartitionsRDD[U, T](this, (context, pid, iter) => iter.map(cleanF)) }實現特征: …

【前端進階】09 編程思維:從事件驅動到數據驅動

事件驅動與數據驅動 GUI與事件事件驅動數據驅動事件驅動和數據驅動的區別 GUI與事件 JavaScript作為瀏覽器的腳本語言&#xff0c;主要用途是與用戶互動、操作DOM&#xff0c;實現頁面UI和DOM操作&#xff0c;屬于GUI&#xff08;圖形用戶界面&#xff09;編程 GUI程序注重用…

WPF-3天快速WPF入門并達到企業級水準

嘿&#xff0c;小伙伴們&#xff01;如果你已經有一定的C#開發基礎&#xff0c;但想快速掌握WPF開發&#xff0c;達到企業級水準&#xff0c;那接下來的這個三天快速入門計劃絕對適合你&#xff01;雖然聽起來有點挑戰&#xff0c;但別擔心&#xff0c;只要跟著這個高強度、結構…

【實戰 ES】實戰 Elasticsearch:快速上手與深度實踐-1.3.1單節點安裝(Docker與手動部署)

&#x1f449; 點擊關注不迷路 &#x1f449; 點擊關注不迷路 &#x1f449; 點擊關注不迷路 文章大綱 10分鐘快速部署Elasticsearch單節點環境1. 系統環境要求1.1 硬件配置推薦1.2 軟件依賴 2. Docker部署方案2.1 部署流程2.2 參數說明2.3 性能優化建議 3. 手動部署方案3.1 安…

小程序中的插槽(Slot)機制及其與 Vue 組件的異同

小程序中的插槽&#xff08;Slot&#xff09;機制及其與 Vue 組件的異同 引言 在小程序開發中&#xff0c;組件化開發是一種重要的設計模式&#xff0c;而插槽&#xff08;Slot&#xff09;機制則是實現組件內容分發的關鍵。通過插槽&#xff0c;開發者可以更靈活地構建可復用…