Element UI:級聯選擇器Cascader_動態加載_多級請求不同接口(已知第一級調取第二級)


ELEMENT UI_CASCADER

使用過餓了么級聯動態加載的小伙伴應該都知道,lazyLoad本身是一個無差別返回渲染結點的函數。

當我們存在一個需求:已知級聯選擇器的第一級結點,現在需要通過第一個結點的value入參調取第二級菜單。

將第一級結點的data寫入options,將含有lazyLoad函數的data寫入props,發現lazyLoad由於第一級結點由於不存在value而打印報錯,點擊后則能正常渲染二級選項。

將Axios置換為setTimeout無差別返回,會發現一級options也返回了lazyLoad中的結點,因此想要解決這個問題還要從lazyLoad根本解決。

LAZYLOAD

首先探究這個函數的執行機制,當頁面渲染級聯選擇器時,lazyLoad被執行,拋出的參數從空對象注入數據為:

可以將其理解為初始化的一個過程,在選擇一級菜單的一個options后再次打印node:

於是我們可以通過node.level判斷當前活動node是第幾級菜單,從而給出不同的resolve處理

或者通過node.data來判斷是否為初始化,通過children判斷它是否存在下級菜單。

這段代碼簡單實現了上一節提到的需求,這方面的可擴展性還是很好的。

- END -


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM