Element 中Select 选择器选择code的时候向后台传递name和code

最新推荐文章于 2023-07-19 17:25:20 发布
最新推荐文章于 2023-07-19 17:25:20 发布
阅读量1.5k 收藏 3
点赞数 2
文章标签： java 开发语言 后端 elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sprouting_new8/article/details/121672446
版权

问题描述：

项目中下拉框选择需要向后台传递选择数据的code和name

解决方案：

1、从后台获取需要的数据，定义数组来接收
2、给select设置点击事件
3、点击事件函数通过选择的code，利用ES6中ES6中Array.find()方法用来查找目标元素，返回的元素code等于下拉框选择传过来 的code
4、给dataForm中定义的数据附上选择返回元素对应的值
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

灵活运用方法

码头土夫子
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementui 下拉框 根据后台返回code显示对应name错误问题
qq_45101496的博客
06-10 738
code的格式存在问题，数据库读取到的数据不一定为number类型 需要自己转换一下 <el-form-item label="融资阶段：" prop="stage"> <el-select v-model="ruleFormedit.stage" clearable filterable style="width:425px;"> <el-option v-for="item in financingli..
el-select 同时传给后端code编码和name
qq_49732089的博客
11-02 411
elementUI select组件向后端传两个参数（ id和name）
m0_58373910的博客
02-11 1823
elementUI select组件向后端传两个参数（ id和name）
el-select下拉框同时传两个甚至更多值给后端
weixin_56733569的博客
07-19 2687
el-select下拉框传多个值给后端
select 下拉框 传值到后台和从后台传值到前端显示
热门推荐
weixin_39209728的博客
12-29 2万+
1. select 下拉框，选择值后传值到后台 &lt;input type="hidden" id="state" name="state" id="state" class="projectfile" value="${model.state}" /&gt; &lt;select class="form-control projectfile&qu
强大的jquery下拉分页选择插件SelectPage
12-12
总的来说，SelectPage.js是jQuery生态中一个实用的组件，通过其强大的功能和易用性，可以帮助开发者构建出具有高级交互特性的下拉分页选择器，提升用户体验。正确地集成和配置SelectPage.js，能够为你的项目带来高效...
2021code-training
03-21
1. 选择器与样式规则：理解类选择器（`.class_name`）、ID选择器（`#id_name`）、标签选择器（`element`）等，以及如何定义样式规则，如`color`、`font-size`、`background-color`等。 2. 层叠和继承：CSS中的层叠...
ZendFramework中文文档
03-22
10.2.3. Fetching Results from a SELECT Statement 10.2.3.1. Fetching a Single Row from a Result Set 10.2.3.2. Fetching a Complete Result Set 10.2.3.3. Changing the Fetch Mode 10.2.3.4. Fetching a ...
RestAssuredAPITesting：使用Rest Assured进行API测试
02-28
// 或者使用CSS选择器 Elements links = doc.select("a"); for (Element link : links) { System.out.println(link.attr("href")); } ``` 六、高级用法 Rest Assured还支持模拟请求头、Cookie、参数、上传文件等...
el-select同时获取code和name的方法
qq_49732089的博客
12-28 744
select's code
KingOfMyHeart的博客
07-28 249
#ifndef __WRAP_H_ #define __WRAP_H_ void perr_exit(const char *s); int Accept(int fd, struct sockaddr *sa, socklen_t *salenptr); int Bind(int fd, const struct sockaddr *sa, socklen_t salen); int Conn...
ElementUI下拉组件el-select一次从后端获取选项并设置默认值的使用
zero_ghq的博客
11-20 5678
使用ElementUI下拉框组件el-select时遇到一个问题，期望从后端获取选项并设置默认值，其中选项的label为名称，value为id，但是默认值显示出来的是value而非label。 前端代码大致如下： <el-select style="width: 130px" v-model="extraAttr.value_id" placeholder="请选择属性值" @change="handleSelectAttrValue(extraAttr)" @clear="handleClearAt
el-select下拉框传值同时传key和value
qq5678574的博客
07-23 4646
<el-select v-model="jobName" placeholder="职位" clearable > <el-option v-for="item in jobNameOptions" :key="item.jobCode" :label="item.jobName" :value="item.jobCode" > </el-option> </el-select> 从接口取到值以后，展示的是jobName，而v-m..
el-select同时获取value和label的值同时传值给后端
Cherry
11-23 3704
el-select同时获取value和label的值同时传值给后端
el-cascader 级联选择器动态加载数据及回显数据方法（最全概括）＜grootbaby＞
grootbaby
07-16 1万+
当地区数据比较多时，全部获取数据速度太慢，体验不太好，改为懒加载，一级一级选择地区就能很好避免速度慢的问题。首次加载第一级数据，给出所需要的参数，因为首次加载 node.value 没有值，据此判断是不是第一级数据。当点击最后一级的时候 label 后面不会转圈圈，并把相关值赋值到选择器上。编辑弹窗展示的时候，有时候并不能正确回显，取消展示或者改变 key 值。依次类推，拿到全部层级的 code 和 name 传给后端接收使用。获取倒数第二级的数据的 name。获取倒数第三级的数据的 name。
Vue实现select下拉框二级联动数据后台获取
Machineone1的博客
03-07 4585
change在表单内容发生改变时出发方法。然后在下面的methods中声明方法，通过this.form.ks获取到当前下拉框的数据。一、二级联动在vue中实现selected的二级联动取其实很简单，可以使用select下拉框的表单改变事件。然后调用后两级访问数据库的方法，获取到联动的数据，添加到对应的v-for循环对象中。：label是指遍历该元素对应的名字，也就是到时候下拉框中展示的内容。主要是使用v-for循环来对option进行动态追加。：value是指该元素对应的值，也就是传递到后台的值。
el-select 下拉列表选项动态绑定接口传过来的值
qq_51710516的博客
07-12 2953
一般来讲，下拉列表的值都为常量，直接写死，遇到需求，需要绑定接口穿过来的值这是接口穿过来的值这为下拉列表空数组，要将接口获得的数据填充进去 在js里写个方法，循环绑定接口中获得的数据 html页面代码 至此数据绑定成功...
Element UI el-select选择器根据后台返回的值动态展示内容
m0_58565372的博客
10-26 1977
需求：一个选择器的下拉框里面的内容是后台返回的数据，对于这样的情况我们怎么处理呢？
vue element 性别select选择器
最新发布
09-09
Vue Element 性别选择器（Gender Select）是一种用于选择性别的下拉菜单组件。该组件结合了Vue和Element UI库，提供了方便的选项和样式设计。 在使用Vue Element 性别选择器时，可以首先导入相应的库和组件。然后，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值