利用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);}

利用bladex+avue实现下拉数据源展示相关推荐

利用CSS实现悬停下拉菜单
利用CSS实现悬停下拉菜单 1.效果鼠标移到[搜索引擎],自动弹出其下拉菜单,在下拉菜单里移动,光条随之移动. 2.代码 <!DOCTYPE html> <html lang=&q ...
Selenium：利用select模块处理下拉框
在利用selenium进行UI自动化测试过程中,经常会遇到下拉框选项,这篇博客,就介绍下如何利用selenium的Select模块来对标准select下拉框进行操作... 首先导入Select模块: ...
element-ui表单下拉选项展示来自数据库的内容
elementui表单下拉选项大家都见过吧,选项内容可以自定义,可是如果要展示的是数据库里的内容就需要一点操作. 这是原始的样子: 代码如下: <el-form-item label=" ...
利用微搭实现下拉框动态填充值得问题
微搭提供了各类表单组件,但是表单的下拉项如果只能是固定值还是远远不能满足需求的,今天我们就来实现一下下拉项如何动态填充值,做好的效果如下: 这里的选项来源于数据源里的值,这样就实现了动态填充选项的效果 ...
利用bladex+avue实现一对多的关系
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂 " 今天,记录一篇技术文章吧,也是解决了好久才解决掉的(说来也惭愧). 涉及技术前端:vue,element ui 后端框 ...
antd select多选_antd多选下拉框一行展示的实现方式
我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局. 我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏. 下面有2种 ...
下拉词（浏览器下拉）及手机APP端下拉联想推荐词的展示规则
各大是搜索引擎(百度.360.搜狗.神马)下拉词(浏览器下拉)及手机APP端下拉联系推荐词的展示规则是什么呢? 首先,我们要了解到一个下拉词的组成部分有关键词(A)和后缀词(B)组成,关键词简单说就是 ...
自定义可扩展叠加头部的下拉控件
最近写了个下拉控件,和几个下拉的头部样式,下拉控件可以连续添加叠加几个头部视图下面是没有添加任何头部尾部的视图下拉效果一步一步来介绍,先介绍这个下拉效果,在介绍自定义的头部首先在使用上,和普通的 ...
前端常用事件案例——抽名字（抽奖）/搜索下拉菜单/微博文本框
目录抽名字(抽奖) 搜索下拉菜单微博文本框进阶微博案例抽名字(抽奖) 实现效果是:点击开始按钮,则方框不断显示名字,点击停止,抽到的人名就是谁,并且删除,继续直到抽完后禁用按钮 ①点击开始按钮 ...

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

需求

技术点

思路分析

具体实现

利用bladex+avue实现下拉数据源展示相关推荐

最新文章

热门文章