elementPlus踩坑紀要|一天多的時間代價才搞明白el-cascader控件懶加載數據后賦值回顯問題
elementPlus是餓了么基于vue3開發的優秀控件集,但其中的el-cascader控件數據回顯怎么都不能正常的顯示出來,看文檔又沒有終點提醒,網上搜索倒是有不少解決方案,但經過一天的時間來回測試才搞明白其中的蹊蹺,其實就是兩個細節注意到是很容易就能實現數據的正確回顯的,踩坑過程就不提了,方便碰到同樣問題的朋友節約時間快速解決問題即可。
el-cascader控件賦值數據正確回顯注意要點
el-cascader的數據回顯就兩個主要屬性搞明白即可:options、props
1、options的內容是數組而不能是字符串(先用的網上提供的回顯方法,轉成字符串顯示是可以,但最后發現下邊的方法繞遠路了,只要本文提到的幾點都注意設置對,給v-model綁定值就可以正?;仫@)
this.$refs.industry.inputValue=[this.form.industry]
this.$refs.industry.presentText=[this.form.industry]
2、賦值的數據必須與懶加載的數據轉換為你props中指定的value指向字段類型一致(做的頁面中有兩個el-cascader控件,正好第一個控件就卡在這里了,花了大半天時間才發現是類型不一致問題引起)
3、value必須唯一,特別是前1到N-1的值必須是唯一的,比如省市縣用['北京', '北京', '東城']賦值給省市縣三級級聯器就不能回顯,但['河北', '邢臺', '邢臺']是可以正?;仫@的,也就是說倒數后兩個索引值重復是可以的,但還是建議賦值最好唯一,賦值后會自動觸發懶加載接口調取與數據關聯的各級數據。