Element Plus 的 Cascader 長得不一樣？解決 el-cascader 無資料時的樣式變更問題
踩雷系列全部的題材保證都是本人親自踩過的，希望各位如果剛好不幸遇到的話也能夠幸運的找到我的這篇文章幫你解惑！
事件經過
最近要把公司的 Vue 2 專案升級到 Vue 3 ，所以 Element UI 也理所當然的要跟著一起升級到 Element UI Plus 的。
剛好在一個頁面裡面有用到 Element UI Plus 的 cascader 元件，元件內的選項是透過 API fetch 得到的，所以會出現在某些選項的 list 裡面是沒有資料的狀況，結果就這樣踩到新的雷了？
踩到的雷
在點擊了一個沒有子項目資料的父層選項時沒有在子選項的區塊顯示原本 Element UI 內建的 No data 的文字，而是可以直接選擇到該父層的選項。
第一個念頭是：這個升級不太可能就這樣把原本設計的樣式直接換掉吧？
解決方法
後來在官方文件（對！又是官方文件）看到了新增的一個屬性 leaf 可以設定該層級的選項是否可以被選取，所以當你在該物件內多寫了一個 leaf: false 時，就可以重現原本 Element UI 內的 No data 的行為了。
後記
後來發現很多雷其實都是因為自己不熟悉套件或是語法的原因造成的，不過我覺得這次的踩雷有讓我學會一件事情，就是不管怎樣官方文件要先研究。
因為在遇到這個問題時，我第一個念頭是先 google 和找 StackOverflow 看有沒有人遇到跟我一樣的狀況，甚至下一步也是轉頭找 ChatGPT 問問看怎麼解決？
但其實發展成熟的套件和框架基本上文件都會非常齊全，甚至有像 playground 這樣的線上編輯器讓你試著用用看的。
所以下次我會先把官方文件先好好看過一遍，如果確定沒有任何解決方案的時候我再去找外部的資源吧！
那我們下次見ʘ‿ʘ
