element-ui Tree之懶加載葉子節點強制設置父級半選效果

效果:

前言:

我們是先只展示一級的,二級的數據是通過點擊之后通過服務器獲取數據,并不是全量數據直接一起返回回來的。

問題:

當你設置了默認選中的子節點,但是由于剛進入頁面此時tree中數據暫是沒有這個子節點時,其父節點并不會具有半選效果

issue地址:

[Feature Request] tree components support setHalfCheckedNodes and setHalfCheckedkeys · Issue #13500 · ElemeFE/element · GitHub

html代碼:

<el-treeref="tree":props="{label: 'Name',isLeaf: 'IsLeaf',}":load="loadNode"lazyshow-checkbox:filter-node-method="filterNode"node-key="Id":default-checked-keys="defaultCheckedKeys"@check-change="handleCheckChange"
></el-tree>

需要回顯數據:

selectDoctorInfo: [{Type: 1,RelationId: '68d5d334-4eff-4cf4-8152-fa6a45546dae', // 子級的 idOrgId: 'bbdcbc14-290f-43f6-91d9-fd31529dbec3', // 父級的 id},{Type: 1,RelationId: '08478d81-9582-4151-9288-fca71beb43fb',OrgId: 'bbdcbc14-290f-43f6-91d9-fd31529dbec3',},{Type: 2,RelationId: '63daa04f-be13-481a-8e5e-6160fee89203',OrgId: '63daa04f-be13-481a-8e5e-6160fee89203',},]

核心代碼:

onEchoTreeData() {// 接口返回已選擇的數據  allHospitalList: 一級的全部數據  selectDoctorInfo: 需要回顯的數據 const selectKeys = [];this.selectDoctorInfo.forEach((v) => {this.allHospitalList.forEach((s) => {if (v.Type === 1) {if (s.Id === v.OrgId) {selectKeys.push(v.RelationId);this.$nextTick(() => {var node = this.$refs.tree.getNode(v.OrgId); // 拿到父級的 idif (node) {// 這里是核心代碼node.indeterminate = true // indeterminate強制設置為半選}})}}if (v.Type === 2) {if (s.Id === v.RelationId) {selectKeys.push(v.RelationId);}}});});this.defaultCheckedKeys = selectKeys;},

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

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

相關文章

A*——AcWing 179. 八數碼

A* 定義 A* 算法是一種在圖形或地圖中尋找最短路徑的啟發式搜索算法。它通過綜合考慮起始節點到當前節點的實際代價和當前節點到目標節點的預估代價&#xff0c;來決定下一步的搜索方向。 運用情況 路徑規劃&#xff1a;如在地圖導航中為車輛、行人規劃最優路線。游戲開發&…

算法刷題筆記 單調棧(C++實現)

文章目錄 題目描述基本思路實現代碼 題目描述 給定一個長度為N的整數數列&#xff0c;輸出每個數左邊第一個比它小的數&#xff0c;如果不存在則輸出?1。 輸入格式 第一行包含整數N&#xff0c;表示數列長度。第二行包含N個整數&#xff0c;表示整數數列。 輸出格式 共一…

學會python——用python制作一個登錄和注冊窗口(python實例十八)

目錄 1.認識Python 2.環境與工具 2.1 python環境 2.2 Visual Studio Code編譯 3.登錄和注冊窗口 3.1 代碼構思 3.2 代碼實例 3.3 運行結果 4.總結 1.認識Python Python 是一個高層次的結合了解釋性、編譯性、互動性和面向對象的腳本語言。 Python 的設計具有很強的可讀…

Spring Boot項目中使用MockMvc進行測試的詳細指南

目錄 MockMvc簡介安裝和配置基本用法高級用法集成測試測試最佳實踐總結 MockMvc簡介 MockMvc是Spring框架提供的一種用于測試Spring MVC控制器的工具。它允許開發者在不啟動完整的Web服務器的情況下&#xff0c;模擬HTTP請求并驗證響應。MockMvc的主要優點包括&#xff1a; …

免殺筆記 ---> PE

本來是想先把Shellcode Loader給更新了的&#xff0c;但是涉及到一些PE相關的知識&#xff0c;所以就先把PE給更了&#xff0c;后面再把Shellcode Loader 給補上。 聲明&#xff1a;本文章內容來自于B站小甲魚 1.PE的結構 首先我們要講一個PE文件&#xff0c;就得知道它的結構…

SPI四種模式--極性與相位

SPI的四種模式&#xff1a;相位和極性 極性 定義時鐘空閑狀態&#xff1a; CPOL0&#xff1a;時鐘線在空閑狀態為低電平 CPOL1&#xff1a;時鐘線在空閑狀態為高電平 這個設置決定了設備不進行通信時時鐘線的狀態。 兼容性&#xff1a; 不同的SPI設備可能需要不同的時鐘極性…

java.lang.classnotfoundexception jakarta.xml.bind.jaxbexception java 17問題

解決 <dependency><groupId>jakarta.xml.bind</groupId><artifactId>jakarta.xml.bind-api</artifactId><version>4.0.2</version> </dependency>參考&#xff1a; Handling NoClassDefFoundError for JAXBException in Jav…

【Linux開發實戰指南】基于TCP、進程數據結構與SQL數據庫:構建在線云詞典系統(含注冊、登錄、查詢、歷史記錄管理功能及源碼分享)

目錄 項目演示&#xff1a; 1. 主界面 技術講解&#xff1a; TCP連接 進程的并發 鏈表 SQLite3 IO對文件的讀寫 功能實現 實現邏輯 我遇到的問題&#xff1a; 服務器端代碼思路解析 必要條件 步驟詳解 客戶端代碼思路解析 步驟詳解 服務器源碼如下&#xff1a;…

windows電腦如何運行python的定時任務

這里需要使用&#xff1a;windows系統設置-控制面板里的計劃任務 1.打開計劃任務之后&#xff0c;選擇&#xff1a;創建基本任務 2.填寫名稱&#xff0c;這里根據自己具體的項目需求填寫&#xff0c;然后點擊下一步。 3.選擇每日&#xff0c;再點擊下一步 4.設置時間&…

Python 學習之常用第三方庫(五)

Python 常用第三方庫 Python 是一門功能強大的編程語言&#xff0c;其生態系統中包含了許多優秀的第三方庫&#xff0c;這些庫極大地擴展了 Python 的功能。以下是一些常用的 Python 第三方庫&#xff1a; 1. NumPy&#xff1a; a. 用于數值計算的庫&#xff0c;提供了大量的…

科普文:linux I/O原理、監控、和調優思路

Linux 文件系統 磁盤和文件系統的關系&#xff1a; 磁盤為系統提供了最基本的持久化存儲。 文件系統則在磁盤的基礎上&#xff0c;提供了一個用來管理文件的樹狀結構。 文件系統工作原理 索引節點和目錄項 文件系統&#xff0c;本身是對存儲設備上的文件&#xff0c;進行…

多維度多場景文檔門戶,鴻翼ECM文檔云打造文檔管理新范式

?在現代企業運營中&#xff0c;內容協作的效率直接影響到組織的整體表現和競爭力。傳統的文檔管理系統都是通過目錄結構的方式進行文件管理&#xff0c;在實際業務中無法滿足用戶多視角、多維度、多場景的文檔業務需求。因此&#xff0c;搭建結合文檔體系的業務門戶是許多企業…

策略模式入門:基本概念與應用

目錄 策略模式策略模式結構策略模式應用場景策略模式優缺點練手題目題目描述輸入描述輸出描述題解 策略模式 策略模式&#xff0c;又稱政策模式&#xff0c;是一種行為型設計模式&#xff0c;它能讓你定義一系列算法&#xff0c;并將每種算法分別放入獨立的類中&#xff0c;以…

數字研發·驅動變革 | 2024達索系統裝備行業數字化研發專題研討會成功舉辦

2024年6月28日&#xff0c;由百世慧舉辦的“數字研發驅動變革|2024達索系統裝備行業數字化研發專題研討會”在達索系統&#xff08;重慶&#xff09;智能制造創新中心成功舉辦。 隨著全球制造業向著智能化、數字化轉型&#xff0c;我國工業裝備行業也面臨著轉型升級的壓力和機遇…

Gym cuda error: invalid resource handle

gym模擬的時候&#xff0c; 出現問題&#xff1a; sim和gym的定義如下&#xff1a; from isaacgym import gymapi,gymtorch import math,random# 1. Simulation Setup gym gymapi.acquire_gym()# get default set of parameters sim_params gymapi.SimParams() sim_params.u…

網關,路由器,交換機

一、網關 (Gateway) 是一種設備&#xff0c;用于連接不同網絡&#xff0c;能夠轉發數據包并翻譯協議&#xff0c;允許不同類型的網絡通信。網關通常工作在OSI模型的應用層或傳輸層&#xff0c;提供連接和路由服務。 應用場景例子&#xff1a; 在企業網絡中&#xff0c;網關可…

四倍體和六倍體小麥抗赤霉病的比較研究

核心總結&#xff1a;四倍體和六倍體小麥抗赤霉病的比較研究 研究背景 小麥赤霉病&#xff08;Fusarium head blight, FHB&#xff09;由Fusarium graminearum引起&#xff0c;是全球范圍內對小麥生產造成嚴重威脅的疾病。FHB感染不僅會顯著降低糧食產量和質量&#xff0c;還…

2024年能在一個月內錄用的EI檢索會議CCPQT 2024

第三屆計算、通信、感知與量子技術國際會議&#xff08;CCPQT 2024&#xff09;將于2024 年10月25日-10月27日在中國珠海召開。&#xff08;往屆均已順利見刊檢索&#xff09; 會議信息 大會官網&#xff1a;http://www.ccpqt.org/ 會議地點&#xff1a;中國珠海 會議時間&…

企業多存儲方式如何兼顧安全統一管理、便捷流暢訪問的雙向需求?

數據和文件存儲是企業最基礎的需求&#xff0c;常見的存儲方式有磁盤存儲、NAS存儲、SAN存儲、云存儲、分布式存儲、閃存存儲等&#xff1b;隨著企業規模的擴大、業務結構的復雜化&#xff0c;企業內部可能會同時出現多種存儲方式、多個存儲設備并行使用的情況。 這樣的使用場景…

python之音頻處理(1)語速快慢的改變

方案1&#xff1a;使用pydub 處理 from pydub import AudioSegment sound AudioSegment.from_file(r"D:\websiteDownload\我今天被一件事情搞得很煩.wav") print(sound.duration_seconds) rate 0.75 sound_with_altered_frame_rate sound._spawn(sound.raw_data,…