Element-ui 級聯選擇器組件功能擴展

上週，在開發過程當中遇見一個需求，總結一下就是：在使用Element-ui級聯選擇器組件的時候，數據既要懶加載，又能單擊選中任意一項。

剛開始我還不覺得意，認爲是個很簡單的需求，信誓旦旦的和產品經理說保證完成任務。

在我吭哧吭哧寫完懶加載功能的時候，發現只能選中最後一項！頓時我就有點慌了，一查文檔，發現懶加載觸發事件active-item-change僅在 change-on-select(是否容許選擇任意一級的選項) 爲 false 時可用。

而後就開啓了個人填坑之旅...
複製代碼

問題描述

在使用Element-ui級聯選擇器組件的時候，若是使用了懶加載功能，就不能單擊選中任意一項。

解決思路

利用elementUI提供的active-item-change事件獲取當前的選擇的路徑數組pathArray。 經過綁定當前事件，構造出select（item，menuInde​​x）須要的數據結構：

item：{
  value: 1,
  label: "vae"
}
menuIndex = pathArray.length - 1
複製代碼

這就能夠實現hover展開，click選中的效果。

代碼實現

注："element-ui": "^2.4.11"

總結

坑已填完，但願你們之後遇到這個問題能夠很好的解決它。

後記： 小夥伴們，若是有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。若是以爲本文還不錯，記得點個贊哦！ 本文首發地址爲： Vae's Blog