建设一个旅游网站必备的,如何在手机上做自己的网站6,网站建设 设计方案 百度文库,宣传片制作公司查询“ 大家好#xff0c;我是雄雄#xff0c;欢迎关注微信公众号#xff1a;????雄雄的小课堂???? ”昨天给大家整理了下如何使用bladex实现多表查询的方法#xff0c;今天我们趁热打铁#xff0c;顺便看看下拉列表的实现。 需求 我们经常会有这样的需求#xff0c;… “ 大家好我是雄雄欢迎关注微信公众号????雄雄的小课堂???? ” 昨天给大家整理了下如何使用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 RListUser select() {ListUser 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 RListUser select() {ListUser list userService.list();return R.data(list);}
