vue前端实现从数据库获取数据的下拉框以及带参请求

一、下拉框的实现

 <el-form-item><el-select @change="getOptions" v-model="type" placeholder="请选择轮播类型" style=""><el-option v-for="(item,index) in objData" :key="index" :value="item.type":label="item.type"/></el-select><el-form-item>

elementui中选择点击事件@change通过getOptions方法获取到数据库中轮播类型，然后通过el-option标签下拉选取

以下是getOptions方法部分的代码

 //获取下拉框中内容getOptions(){let _this = thisthis.$http.get("/company/imgtype/queryAll").then(res =>{//请求返回的数据//赋值_this.objData = res.dataconsole.log(this.objData)}).catch((error) =>{console.log(error);});},

带参请求通过request方法

<el-form-item><el-button @click="getType(type)">类别查询</el-button>
</el-form-item>

定义getType方法括号内写入type参数名和上述v-model对应

在下方method中定义getType方法

gettype(e){console.log(this.dataList);this.$http.get('/company/slideshow/type',{params:{type:e}}).then((res) => {console.log(res)this.dataList= res.data}).catch((error) =>{console.log(error);});}

e为传进来的参数值params里面放参数，res为返回的数据源，将获取的数据填充到datalist中在本页面显示，catch中打印捕获到的异常

vue前端实现从数据库获取数据的下拉框以及带参请求相关推荐

FineReport 报表数据根据下拉框的值进行数据联动
FineReport 报表数据根据下拉框的值进行数据联动,不用点击查询按钮 1.新建数据库查询,获得数据. SELECT * FROM [销量] where 地区 ='${area}' 2.把需要展示 ...
获取数据库内容放入下拉框中
获取数据库里的数据放入下拉框中,使下拉框显示的内容是数据库里的内容功能分析: 设计并实现数据库插入相关数据在登陆页面点击注册按钮时跳到Servlet中在Servlet中连接数据库查询内容放入 ...
ajax里绑定框,Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）
需求类似这样 ↓ ↓ ↓ --> 菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: $(function () { $("#TeamSelect").chan ...
layui 数据表格下拉框_layui学习——数据表格嵌套下拉列表，并实现动态更新
layui学习--数据表格嵌套下拉列表,并实现动态更新项目中有些字段的数据为固定的几个值,这些字段在数据表格中显示为汉字,但在数据库中以数字形式存储,例如:仓库属性(0:普通仓/1:检验仓/2:报废 ...
layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了思路分析: 我们可以通过layui ...
java导出Excel增加下拉框选项，解决小数据量和大数据量下拉框选项的问题
文章目录 java导出Excel增加下拉框选项一.小数据量情况二.大数据量情况 java导出Excel增加下拉框选项(java结合easyExcel) 添加传参模型ConsumablesAddDT ...
layui 数据表格下拉框_layui-table-column-select（layui数据表格可搜索下拉框select）
layui-table-column-select 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/kkk12/layu ...
Ext JS - Combobox 加载下拉框数据级联下拉框
Combobox 加载下拉框数据点击下拉框,数据从后台加载,是很常见的需求.如下图: View 中下拉框 dockedItems : [ {dock : 'top',xtype : 'toolbar ...
jq获取下拉列表_jQuery下拉框操作系列$(option:selected,this) （锋利的jQuery）
下拉框应用选项1 选项2 选项3 选项4 选项5 选项6 选项7 选项8 选中添加到右边≥≥ 全部添加到右边≥≥ 选中删除到左边<< 全部删除到左边<< $(function ...

vue前端实现从数据库获取数据的下拉框以及带参请求

一、下拉框的实现

带参请求通过request方法

vue前端实现从数据库获取数据的下拉框以及带参请求相关推荐

最新文章

热门文章