?

“

大家好，我是雄雄，歡迎關注微信公眾號：????雄雄的小課堂????

”

昨天給大家整理了下如何使用bladex實現多表查詢的方法，今天我們趁熱打鐵，順便看看下拉列表的實現。

需求

我們經常會有這樣的需求，比如在添加學生信息時，需要選擇該生所在的年級，這時候我們一般都是將所有年級信息查詢展示在下拉列表中供用戶選擇，從而提升用戶體驗度，現在，我們就來看看bladex中是如何實現的。

技術點

• 前端：avue,Element ui

• 后端：springboot,springmvc,mybatis plus,bladex

思路分析

在vue頁面中加載列的時候，設置改列類型type為select，且設置加載數據源的地址dicUrl,最后將改地址的數據通過props對象展示出來，一般只需要props中的label和value即可。

• label:下拉列表中展示的文本。

• value:下拉列表中的value值，提交表單的時候提交的是該值。

具體實現

1.修改vue頁面的字段字段代碼：

{label:?"創建者",prop:?"tcid",type:?"select",hide:false,dicUrl:?"/api/blade-user/select",props:?{label:?"name",value:?"id"},dataType:?"string",rules:?[{required:?false,message:?"請輸入創建模板的人",trigger:?"click"}]}

注意：

• dicUrl所指向的地址是查詢下拉列表的內容，對應的后臺UserController控制器中的代碼為：

?/***?下拉數據源*/@GetMapping("/select")@ApiOperationSupport(order?=?3)@PreAuth(RoleConstant.HAS_ROLE_ADMIN)public?R<List<User>>?select()?{List<User>?list?=?userService.list();return?R.data(list);}

• prop對應的是數據庫中該表外鍵的字段

• props中的label對應的是下拉列表的文本，在這里是用戶表的用戶名

• props中的value對應的是下拉列表的值，在這里是用戶表的編號，因為提交表單時我們需要的編號值

• tigger表示點擊觸發下拉選項

2.在控制器中添加對應dicUrl地址的代碼即可，改代碼主要實現查詢下拉數據源的功能。

/***?下拉數據源*/@GetMapping("/select")@ApiOperationSupport(order?=?3)@PreAuth(RoleConstant.HAS_ROLE_ADMIN)public?R<List<User>>?select()?{List<User>?list?=?userService.list();return?R.data(list);}

總結

以上是生活随笔為你收集整理的利用bladex+avue实现下拉数据源展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。