vue框架編輯接口頁面下拉級聯選擇並綁定接口所屬模塊

Posted on by

基於 springboot+vue 的測試平臺開發

繼續更新

停更得有半年，最近待業傢中沒有理由不繼續更新瞭。本來是打算做別的功能，但是我的重新調試環境的時候發現瞭bug，搞半天原來是因為沒實現接口與模塊的綁定，導致點擊左側模塊樹之後列表頁就沒數據。氣死我瞭，那先來把這個坑填上。

先看一下最後的功能效果動圖。

因為完善這個功能要涉及一些之前功能的改動，所以接下來以實際的開發修改過程來記錄內容(源碼獲取在文末)：

尋找級聯組件後端返回組件需要的數據內容修改前端內容，使用級聯組件修改新增、編輯功能，保存選擇的模塊修改編輯回顯功能，顯示對應節點

一、級聯選擇器組件

elementUI 官網，找到級聯選擇器組件。

查看組件的功能屬性，發現可以滿足我的需求：

懸停觸發級聯菜單支持單獨選擇每一級支持搜索節點

二、後端返回組件需要的數據

查看組件屬性得知所需的數據內容，value用於存放選擇的節點，註意這裡存進去的是數組。而options就是數據源來，也是一個數組，裡面的屬性有：

value，選擇節點時候的賦值label，顯示的節點文本內容children，子節點嵌套的內容

其實這裡模塊節點裡要用的數據，就是左側模塊樹的數據。

對於這個模塊樹我後端是有一個專門的接口返回的，所以我打算復用這個接口。思路就是當這個接口被請求的時候，我再把這個接口返回的數據賦值options即可。

但是用下來發現後端原接口是少瞭一個返回字段value，會導致選擇的時候有bug，所以我修改瞭後端接口，增加一個字段的返回。

新增的字段裡的值我使用模塊id，不會重復。

F12看下修改後的接口返回，沒問題。

三、前端使用級聯組件

後端數據有瞭，下面改前端，找到編輯頁面裡的對應位置，原來的內容是我臨時放置的一個下拉選擇框(圖中被註釋部分)，現在用級聯組件的內容(紅框部分)替換上去。

說一下用到的組件屬性：

:show-all-levels="false": 輸入框中是否顯示選中值的完整路徑，false就隻顯示最後一級。

filterable: 是否可搜索選項，開啟

placeholder: 占位符，顯示背景內容

clearable：支持清空選項

v-model: 綁定你選中的節點value 到某個字段上

options: 後端接口返回的數據，存放在這個字段上

:props：用到的一些其他配置選項

@change：當選中節點變化時觸發

{ expandTrigger: 'hover', checkStrictly: true }，關於用到的2個 props，作用分別是：

expandTrigger：次級菜單的展開方式，hover是鼠標懸停展開，我覺得比較方便。

checkStrictly: 是否嚴格的遵守父子節點不互相關聯，true 就可以支持任意一個節點的選擇。

四、新增、編輯裡保存選擇的模塊

我重新查看瞭前端點擊保存按鈕的代碼，發現會判斷此時是新增還是編輯，從而選擇調用對應的新增或者修改方法。

進一步查看這2個方法，發現裡面關於請求數據的處理都封裝在另一個方法handleSaveRequest裡。

找到方法瞭對應的模塊id的字段，之前我沒實現這個功能的時候，是寫死瞭 0。

這裡我前端做瞭一下處理，因為後端接口接收到參數是int，但是組件這裡 value 是數組，通過在handleChange方法裡加log打印，查看控制臺裡的返回便知。

這裡我操作瞭2次，發現數組的最後一個是你選擇的節點，所以我要取出這個最後一個節點用來請求後端接口，索引就是數組length-1。

本來以為這樣就可以瞭，後來調試時候發現bug，最後發現新增和編輯的時候，還不能統一都這麼處理。

因為新增的時候傳入的是數組，但是編輯的時候就隻是一個值，所以這裡更具當前的頁面狀態是編輯還是新增加瞭判斷，分開處理。

調試一下編輯保存，查看入參以及數據庫落庫都正常。

調試一下新增保存，查看入參以及數據庫落庫都正常。

五、編輯回顯模塊節點

此時我點擊編輯按鈕打開編輯頁面，發現是沒顯示已保存的模塊節點的。

F12 查看打開編輯調用的接口，發現接口返回裡有瞭 moduleId 。

但是我原接口裡返回的是 int 類型，這裡看控制臺裡組件裡的是字符串，所以我嘗試修改瞭下後端的接口，以及數據庫的字段類型，正常瞭。

看下效果。

坑填上瞭，完整代碼更新

前端：

https://github.com/wessonlan/bloomtest-web

後端

https://github.com/wessonlan/bloomtest-backend

以上就是vue框架編輯接口頁面下拉級聯選擇並綁定接口所屬模塊的詳細內容，更多關於vue下拉級聯選擇並綁定接口所屬模塊的資料請關註WalkonNet其它相關文章！

推薦閱讀：