上週,在開發過程中碰見一個需求,總結一下就是:在使用Element-ui級聯選擇器元件的時候,資料既要懶載入,又能單擊選中任意一項。
剛開始我還不以為意,認為是個很簡單的需求,信誓旦旦的和產品經理說保證完成任務。
在我吭哧吭哧寫完懶載入功能的時候,發現只能選中最後一項!頓時我就有點慌了,一查文件,發現懶載入觸發事件active-item-change僅在 change-on-select(是否允許選擇任意一級的選項) 為 false 時可用。
然後就開啟了我的填坑之旅...
複製程式碼
問題描述
在使用Element-ui級聯選擇器元件的時候,如果使用了懶載入功能,就不能單擊選中任意一項。解決思路
利用elementUI提供的active-item-change事件獲取當前的選擇的路徑陣列pathArray。 通過繫結當前事件,構造出select(item,menuIndex)需要的資料結構:item:{
value: 1,
label: "vae"
}
menuIndex = pathArray.length - 1
複製程式碼
這就可以實現hover展開,click選中的效果。
程式碼實現
總結
坑已填完,希望大家以後遇到這個問題可以很好的解決它。後記: 小夥伴們,如果有錯誤或者不嚴謹的地方,請務必給予指正,十分感謝。如果覺得本文還不錯,記得點個贊哦! 本文首發地址為: Vae's Blog