利用bladex+avue实现下拉数据源展示

​

大家好，我是雄雄，欢迎关注微信公众号：???雄雄的小课堂???

昨天给大家整理了下如何使用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);
 }