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

最新推荐文章于 2024-02-18 13:53:09 发布
最新推荐文章于 2024-02-18 13:53:09 发布
阅读量1.6k 收藏 3
点赞数 2
文章标签： java 开发语言 后端 elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sprouting_new8/article/details/121672446
版权
本文介绍了一种解决项目中下拉框选择数据传递的方法。通过从后台获取数据并存储到数组，设置select点击事件，利用ES6的Array.find()方法查找匹配的元素，将选中的code映射到对应name，从而实现数据的正确传递。总结强调了灵活运用方法的重要性。
摘要由CSDN通过智能技术生成

问题描述：

项目中下拉框选择需要向后台传递选择数据的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 750
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..
element Select 选择器多选时获取对应的code和name
improvement
11-12 2270
2、elemennt Select 选择器多选时获取对应的code和name 2.1、在页面中使用el-select，此处是多选。道理都一样 <el-select @change="cityChooseData" size="small" v-model="cityLimitData" multiple
el-select 同时传给后端code编码和name
qq_49732089的博客
11-02 422
elementUI select组件向后端传两个参数（ id和name）
m0_58373910的博客
02-11 1917
elementUI select组件向后端传两个参数（ id和name）
el-select下拉框同时传两个甚至更多值给后端
weixin_56733569的博客
07-19 2826
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获取Select选择的Text和Value(详细汇总)
12-03
1. **获取Select选择的Text和Value**： - 使用`$(“#select_id”).find(“option:selected”).text()`可以获取当前被选中Option的文本内容。 - 使用`$(“#select_id”).val()`则可以获取当前被选中Option的关联值...
【vue 项目】element-select选择器 以省市下拉框联动为例 通过value获取label的值 将value和label都传给后端
Aohanzzz的博客
09-08 1972
element-select选择器 以省市下拉框联动为例 通过value获取label的值 将value和label都传给后端
Vue Element Cascader 级联选择器
lmf13992427957的博客
09-28 2809
因为后台返回的最后一级虽然没内容，但是是个空数组，所以会显示空白，通过递归判断是否是空数组，然后设置为undefined即可。方法changeProblemType获取的数据是个数组，若是只想要选择的该级的数据id，通过遍历该数组获取最后一个数值。级联选择器默认只能选择最后一级的，想要选择任意一级，加上属性change-on-select。特性：1.后端返回的数据格式名称跟前端需要的名称不一致：使用:props动态改变。
element时间日期选择器的时差与格式
HEJA_BVB_09的博客
12-09 582
前后端datetime数据问题 SQL查询数据库时查出的datetime数据是’-'类型的， SELECT [ErrorCode] ,[ErrorName] ,[PlcCode] ,[PlcName] ,[TaskNo] ,[ErrorDate] FROM [TechStarILTS].[dbo].[WCSErrorAlarm...
el-select同时获取code和name的方法
qq_49732089的博客
12-28 780
select's code
KingOfMyHeart的博客
07-28 262
#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 5771
使用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 选择器前后端基础用法
最新发布
weixin_49945221的博客
02-18 527
官方文档中只给了当前组件的一个简介，没有具体到实践中传后端并返回数据，还是自己解决，特此记录一下。官方文档中v-model="value",以至于查询传参时无法识别value，正确做法是。去岁千般皆如意，今年万事皆称心，代码需要我们细心细心再细心，开工大吉，接着搬砖！今日bug是el-select的下拉选择框数据没有传到后台，返回数据不正确。options是选择框中下拉选项，而searchModel是我们的查询条件。作为一个后端开发人员对前端的bug真的是有点头大。2024开年上工第一天，记录一下。
el-select下拉框传值同时传key和value
qq5678574的博客
07-23 4770
<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 3790
el-select同时获取value和label的值同时传值给后端
el-cascader 级联选择器动态加载数据及回显数据方法（最全概括）＜grootbaby＞
grootbaby
07-16 1万+
当地区数据比较多时，全部获取数据速度太慢，体验不太好，改为懒加载，一级一级选择地区就能很好避免速度慢的问题。首次加载第一级数据，给出所需要的参数，因为首次加载 node.value 没有值，据此判断是不是第一级数据。当点击最后一级的时候 label 后面不会转圈圈，并把相关值赋值到选择器上。编辑弹窗展示的时候，有时候并不能正确回显，取消展示或者改变 key 值。依次类推，拿到全部层级的 code 和 name 传给后端接收使用。获取倒数第二级的数据的 name。获取倒数第三级的数据的 name。
Vue实现select下拉框二级联动数据后台获取
Machineone1的博客
03-07 4714
change在表单内容发生改变时出发方法。然后在下面的methods中声明方法，通过this.form.ks获取到当前下拉框的数据。一、二级联动在vue中实现selected的二级联动取其实很简单，可以使用select下拉框的表单改变事件。然后调用后两级访问数据库的方法，获取到联动的数据，添加到对应的v-for循环对象中。：label是指遍历该元素对应的名字，也就是到时候下拉框中展示的内容。主要是使用v-for循环来对option进行动态追加。：value是指该元素对应的值，也就是传递到后台的值。
el-select 下拉列表选项动态绑定接口传过来的值
qq_51710516的博客
07-12 3075
一般来讲，下拉列表的值都为常量，直接写死，遇到需求，需要绑定接口穿过来的值这是接口穿过来的值这为下拉列表空数组，要将接口获得的数据填充进去 在js里写个方法，循环绑定接口中获得的数据 html页面代码 至此数据绑定成功...
Element写一个省市选择器
07-09
你可以使用Element UI库来创建一个省市选择器。下面是一个简单的示例代码： ```html <template> <div> <el-select v-model="selectedProvince" placeholder="选择省份" @change="onProvinceChange"> <el-option v-for="province in provinces" :key="province.code" :label="province.name" :value="province.code"></el-option> </el-select> <el-select v-model="selectedCity" placeholder="选择城市"> <el-option v-for="city in cities" :key="city.code" :label="city.name" :value="city.code"></el-option> </el-select> </div> </template> <script> export default { data() { return { selectedProvince: '', selectedCity: '', provinces: [ { code: '001', name: '北京' }, { code: '002', name: '上海' }, // 添加更多省份... ], cities: [], cityMap: { '001': [ { code: '001001', name: '东城区' }, { code: '001002', name: '西城区' }, // 添加更多城市... ], '002': [ { code: '002001', name: '黄浦区' }, { code: '002002', name: '静安区' }, // 添加更多城市... ], // 添加更多省份和城市... } } }, methods: { onProvinceChange() { // 根据选中的省份更新城市列表 this.cities = this.cityMap[this.selectedProvince]; this.selectedCity = ''; } } } </script> ``` 在这个示例中，我们使用了两个`el-select`组件来分别展示省份和城市的选择框。当选择省份时，会触发`onProvinceChange`方法，更新城市列表。你可以根据实际需求修改省份和城市的数据和编号。记得在你的项目中引入Element UI库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值