cascader中的動態搜索(多個接口渲染級聯選擇框)以及編輯中動態搜索的數據回顯問題


1.cascader中的動態搜索(多個接口渲染級聯選擇框)以及編輯中動態搜索的數據回顯問題

 

 

1)v-model:綁定的是一個數組,數組中存儲所選內容(label)所對應的id  而value中存儲的內容不一定是id  可以自定義 他是change改變時輸出的內容

@change="cascaderChange"     若該級聯選擇是多選的話 v-model綁定的是二維數組[ [id1,id2,id3],[id4,id5,id6] ] 

2) clearable:input框開啟刪除功能

 

 

3)filterable:input框開啟搜索功能

4)props:在該對象中實現接口調用和數據渲染

 

 lazy:true--開啟懶加載模式  只有開啟該模式 lazeLoad才會起作用  this.cascaderLazyLoad是自定義的一個方法寫在methods中

 

 

 1)node打印出來是一個對象  level是該對象的一個屬性代表當前是第幾級  默認是0級(當input輸入框顯示出來的時候自動執行第0級) 

2)在第0級的時候去渲染第一級數據,點擊第一級數據時level變成了1這個時候觸發接口去渲染第二級數據

3)  點擊第二級數據level變為2 這個時候去觸發接口渲染第三級的數據  到此三級數據渲染完畢,要想只展示這三級的數據我們需要在最后一級的數據中加上

item.leaf = level >=2//level就是級別  即為當點擊完第二級的時候動態搜索結束,這個時候我們再點擊第三級的數據時便不會再觸發動態搜索而是直接將數據展示在輸入框中

4) resolve(res)  resolve是UI組件封裝的  我們只需將接口返回的對象數據傳進去即可自動進行數據的渲染  注意:resolve只識別label和value兩個字段  所以我們需要將要顯示的數據賦值給label  數據所對應的id賦值給value即可

 

編輯中動態搜索的數據回顯問題

動態搜索三級數據渲染完畢后我們在開發中還經常面臨另外一個問題  就是編輯問題,當點擊編輯按鈕的時候我們需要先將當前的數據渲染到表單中再對數據進行更改 最后再進行提交即可完成一系列的編輯工作,但動態搜索三級級聯應該如何數據回顯呢?

v-model = 'value'  value數組中存儲的是當前三級數據所對應的id  數據回顯的時候也是依靠給value賦值后端傳回的id值即可完成回顯

賦值后可能會存在這么一個問題,當我們第一次點擊編輯時可以正常進行顯示,關閉對話框后再次點擊編輯時數據顯示失敗  原因是對話框默認的關閉不能夠完全清除dom結構 這時候我們可以用v-if來進行對話框顯示與隱藏的切換

 

 

 editShowOrHidenFlag:true//必須要設為true   editCourseDialog為true的時候顯示對話框  false則相反

使用v-if來切換對話框的顯示與隱藏也有弊端 就是對話框自帶的事件有的無法正常使用  比如@close事件失效  這時我們可以使用:before-close來實現close的邏輯

 

 在觸發edithandleClose函數時調用close所定義的函數以此來達到關閉對話框時數據的清除

 

 這樣就可以實現動態搜索編輯時的數據回顯功能了

 


免責聲明!

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



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