vue框架編輯接口頁面下拉級聯(lián)選擇并綁定接口所屬模塊
基于 springboot+vue 的測試平臺開發(fā)
繼續(xù)更新
停更得有半年，最近待業(yè)家中沒有理由不繼續(xù)更新了。本來是打算做別的功能，但是我的重新調(diào)試環(huán)境的時候發(fā)現(xiàn)了bug，搞半天原來是因為沒實現(xiàn)接口與模塊的綁定，導致點擊左側(cè)模塊樹之后列表頁就沒數(shù)據(jù)。氣死我了，那先來把這個坑填上。
先看一下最后的功能效果動圖。
因為完善這個功能要涉及一些之前功能的改動，所以接下來以實際的開發(fā)修改過程來記錄內(nèi)容(源碼獲取在文末)：
尋找級聯(lián)組件后端返回組件需要的數(shù)據(jù)內(nèi)容修改前端內(nèi)容，使用級聯(lián)組件修改新增、編輯功能，保存選擇的模塊修改編輯回顯功能，顯示對應節(jié)點
一、級聯(lián)選擇器組件
elementUI 官網(wǎng)，找到級聯(lián)選擇器組件。
查看組件的功能屬性，發(fā)現(xiàn)可以滿足我的需求：
懸停觸發(fā)級聯(lián)菜單支持單獨選擇每一級支持搜索節(jié)點
二、后端返回組件需要的數(shù)據(jù)
查看組件屬性得知所需的數(shù)據(jù)內(nèi)容，value用于存放選擇的節(jié)點，注意這里存進去的是數(shù)組。而options就是數(shù)據(jù)源來，也是一個數(shù)組，里面的屬性有：
value，選擇節(jié)點時候的賦值label，顯示的節(jié)點文本內(nèi)容children，子節(jié)點嵌套的內(nèi)容
其實這里模塊節(jié)點里要用的數(shù)據(jù)，就是左側(cè)模塊樹的數(shù)據(jù)。
對于這個模塊樹我后端是有一個專門的接口返回的，所以我打算復用這個接口。思路就是當這個接口被請求的時候，我再把這個接口返回的數(shù)據(jù)賦值options即可。
但是用下來發(fā)現(xiàn)后端原接口是少了一個返回字段value，會導致選擇的時候有bug，所以我修改了后端接口，增加一個字段的返回。
新增的字段里的值我使用模塊id，不會重復。
F12看下修改后的接口返回，沒問題。
三、前端使用級聯(lián)組件
后端數(shù)據(jù)有了，下面改前端，找到編輯頁面里的對應位置，原來的內(nèi)容是我臨時放置的一個下拉選擇框(圖中被注釋部分)，現(xiàn)在用級聯(lián)組件的內(nèi)容(紅框部分)替換上去。
說一下用到的組件屬性：
:show-all-levels="false": 輸入框中是否顯示選中值的完整路徑，false就只顯示最后一級。
filterable: 是否可搜索選項，開啟
placeholder: 占位符，顯示背景內(nèi)容
clearable：支持清空選項
v-model: 綁定你選中的節(jié)點value 到某個字段上
options: 后端接口返回的數(shù)據(jù)，存放在這個字段上
:props：用到的一些其他配置選項
@change：當選中節(jié)點變化時觸發(fā)
{ expandTrigger: 'hover', checkStrictly: true }，關(guān)于用到的2個 props，作用分別是：
expandTrigger：次級菜單的展開方式，hover是鼠標懸停展開，我覺得比較方便。
checkStrictly: 是否嚴格的遵守父子節(jié)點不互相關(guān)聯(lián)，true 就可以支持任意一個節(jié)點的選擇。
四、新增、編輯里保存選擇的模塊
我重新查看了前端點擊保存按鈕的代碼，發(fā)現(xiàn)會判斷此時是新增還是編輯，從而選擇調(diào)用對應的新增或者修改方法。
進一步查看這2個方法，發(fā)現(xiàn)里面關(guān)于請求數(shù)據(jù)的處理都封裝在另一個方法handleSaveRequest里。
找到方法了對應的模塊id的字段，之前我沒實現(xiàn)這個功能的時候，是寫死了 0。
這里我前端做了一下處理，因為后端接口接收到參數(shù)是int，但是組件這里 value 是數(shù)組，通過在handleChange方法里加log打印，查看控制臺里的返回便知。
這里我操作了2次，發(fā)現(xiàn)數(shù)組的最后一個是你選擇的節(jié)點，所以我要取出這個最后一個節(jié)點用來請求后端接口，索引就是數(shù)組length-1。
本來以為這樣就可以了，后來調(diào)試時候發(fā)現(xiàn)bug，最后發(fā)現(xiàn)新增和編輯的時候，還不能統(tǒng)一都這么處理。
因為新增的時候傳入的是數(shù)組，但是編輯的時候就只是一個值，所以這里更具當前的頁面狀態(tài)是編輯還是新增加了判斷，分開處理。
調(diào)試一下編輯保存，查看入?yún)⒁约皵?shù)據(jù)庫落庫都正常。
調(diào)試一下新增保存，查看入?yún)⒁约皵?shù)據(jù)庫落庫都正常。
五、編輯回顯模塊節(jié)點
此時我點擊編輯按鈕打開編輯頁面，發(fā)現(xiàn)是沒顯示已保存的模塊節(jié)點的。
F12 查看打開編輯調(diào)用的接口，發(fā)現(xiàn)接口返回里有了 moduleId 。
但是我原接口里返回的是 int 類型，這里看控制臺里組件里的是字符串，所以我嘗試修改了下后端的接口，以及數(shù)據(jù)庫的字段類型，正常了。
看下效果。
坑填上了，完整代碼更新
前端：
https://github.com/wessonlan/bloomtest-web
后端
https://github.com/wessonlan/bloomtest-backend
以上就是vue框架編輯接口頁面下拉級聯(lián)選擇并綁定接口所屬模塊的詳細內(nèi)容，更多關(guān)于vue下拉級聯(lián)選擇并綁定接口所屬模塊的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue中的scoped和 elememt-plus的樣式修改方法
Vue中的scoped屬性用于實現(xiàn)樣式隔離,確保組件間的樣式互不影響,通過在組件的style標簽內(nèi)添加任何內(nèi)容,可以為組件生成一個唯一的哈希值,從而實現(xiàn)樣式的定位,本文通過實例代碼講解Vue中的scoped和 elememt-plus的樣式修改方法,感興趣的朋友一起看看吧2025-01-01
路由導航守衛(wèi)提供了一些鉤子函數(shù),可以在路由導航過程中進行攔截和控制,其中,beforeEach 導航守衛(wèi)可以在每次路由切換前被觸發(fā),本文給大家介紹Vue路由守衛(wèi)詳解,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue 打包后找不到dist文件夾的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
之前在網(wǎng)上看到《藍色拼圖》這款小游戲，作者是用jquery寫的。下面通過本文給大家分享基于vue.js編寫藍色拼圖小游戲，一起看看實現(xiàn)代碼吧2017-03-03
這篇文章主要為大家詳細介紹了vue移動端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
Vue路由懶加載是一種優(yōu)化技術(shù),旨在減少應用程序的初始加載時間并提高性能,這篇文章給大家介紹vue路由懶加載的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要介紹了vue自定義穿梭框支持遠程滾動加載,iview是全局注入，基本使用原先的類名進行二次創(chuàng)建公共組件，修改基礎(chǔ)js實現(xiàn)邏輯，本文結(jié)合實例代碼介紹的非常詳細，需要的朋友可以參考下2023-08-08
Vue 解決父組件跳轉(zhuǎn)子路由后當前導航active樣式消失問題
這篇文章主要介紹了Vue 解決父組件跳轉(zhuǎn)子路由后當前導航active樣式消失問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue子組件實時獲取父組件的數(shù)據(jù)實現(xiàn)
本文主要介紹了vue子組件實時獲取父組件的數(shù)據(jù)實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
vite5+vue3+?import.meta.glob動態(tài)導入vue組件圖文教程
import.meta.glob是Vite提供的一個特殊功能,它允許你在模塊范圍內(nèi)動態(tài)地導入多個模塊,這篇文章主要給大家介紹了關(guān)于vite5+vue3+?import.meta.glob動態(tài)導入vue組件的相關(guān)資料,需要的朋友可以參考下2024-07-07