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

最新推荐文章于 2024-05-08 15:23:10 发布
原创 最新推荐文章于 2024-05-08 15:23:10 发布 · 1.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #开发语言 #后端 #elementui #前端

本文介绍了一种解决项目中下拉框选择数据传递的方法。通过从后台获取数据并存储到数组，设置select点击事件，利用ES6的Array.find()方法查找匹配的元素，将选中的code映射到对应name，从而实现数据的正确传递。总结强调了灵活运用方法的重要性。

问题描述：

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

解决方案：

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

总结

灵活运用方法

vue3 - elementPlus全国城市列表选择器，提供省市区联动选择器、选择地址省市区级联、复选框tree树状省份全部列出来勾选，支持数据懒加载节点动态加载（附带全国省市区县乡镇村json数据）
高级前端工程师
09-22 4712
vue3，element-plus，Element Plus级联和树形省市区，组件tree实现省市多级联动，vue3省市区三级联动选择器，选择地址，选择地区，选择多个省市区、批量选择城市，选择当前位置，省市区数据懒加载，动态加载城市数据，插件，地址选择器组件，城市选择器，省市区联动选择，Tree树组件列出省名称，树结构的城市列表，vue3省市区tree树形级联，全国省份列表，展开下级多级，vue3 element实现省市区选择联动，地区选择器，把所有省份都展示出来，选择多个城市，省市区三级联动选择器，省市区
vue+element ui中动态实现级联选择器 el-cascader踩过的坑
在路上`的博客
11-30 9891
实现效果图 实现方法 html 备注 ：props 可初始化一些字段； change事件可以获取所需要的value 值 js 获取动态数据并赋值所需要的数组 这样就基本实现了级联选择器，但是坑来了 描述 当级联选择器内容需要动态变化时，会爆出Cannot read property ‘level’ of null错误（如果没有选择就不会报错的） 分析 这个错误的原因是当选择后，再更新内容时，选择器仍会关联原来的数据，导致找不到之前选择的元素。 解决 所以可以采用 重新渲染 的方式解决这个问题。
el-select 同时传给后端code编码和name
qq_49732089的博客
11-02 503
elementUI select组件向后端传两个参数（ id和name）
m0_58373910的博客
02-11 2147
elementUI select组件向后端传两个参数（ id和name）
el-cascader 级联选择器动态加载数据及回显数据方法（最全概括）＜grootbaby＞
grootbaby
07-16 1万+
当地区数据比较多时，全部获取数据速度太慢，体验不太好，改为懒加载，一级一级选择地区就能很好避免速度慢的问题。首次加载第一级数据，给出所需要的参数，因为首次加载 node.value 没有值，据此判断是不是第一级数据。当点击最后一级的时候 label 后面不会转圈圈，并把相关值赋值到选择器上。编辑弹窗展示的时候，有时候并不能正确回显，取消展示或者改变 key 值。依次类推，拿到全部层级的 code 和 name 传给后端接收使用。获取倒数第二级的数据的 name。获取倒数第三级的数据的 name。
el-select下拉框同时传两个甚至更多值给后端
weixin_56733569的博客
07-19 3181
el-select下拉框传多个值给后端
el-select同时获取code和name的方法
qq_49732089的博客
12-28 875
jQuery获取Select选择的Text和Value(详细汇总)
12-03
1. **获取Select选择的Text和Value**： - 使用`$(“#select_id”).find(“option:selected”).text()`可以获取当前被选中Option的文本内容。 - 使用`$(“#select_id”).val()`则可以获取当前被选中Option的关联值...
ElementUI Select选择器多选获取选中对象
最新发布
qq_42740298的博客
05-08 1660
ElementUI Select选择器多选获取选中对象
【Strelitzia项目】vue3+ts实现element-plus中选择器省市区三级联动
小小的胡萝卜的博客
11-08 1395
最近在部署项目时，想要做一个收货地址的功能，但是仅凭用户自己去输入地址感觉不太规范，假设用户输入了一个假的地址改如何处理呢，所以需要做出一个比较规范的选择器来解决这个问题。但是在这个问题的过程中存在着不少疑惑，首先就是百度找不到vue3+ts的代码，而自己本身又是后端开发人员，所以在技术层面存在着不少的疑问，vue2编写代码的方式不太熟练。参考文章。
elementui 下拉框 根据后台返回code显示对应name错误问题
qq_45101496的博客
06-10 826
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..
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
element Select 选择器多选时获取对应的code和name
improvement
11-12 2541
2、elemennt Select 选择器多选时获取对应的code和name 2.1、在页面中使用el-select，此处是多选。道理都一样 <el-select @change="cityChooseData" size="small" v-model="cityLimitData" multiple
select's code
KingOfMyHeart的博客
07-28 320
#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 6095
使用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 681
官方文档中只给了当前组件的一个简介，没有具体到实践中传后端并返回数据，还是自己解决，特此记录一下。官方文档中v-model="value",以至于查询传参时无法识别value，正确做法是。去岁千般皆如意，今年万事皆称心，代码需要我们细心细心再细心，开工大吉，接着搬砖！今日bug是el-select的下拉选择框数据没有传到后台，返回数据不正确。options是选择框中下拉选项，而searchModel是我们的查询条件。作为一个后端开发人员对前端的bug真的是有点头大。2024开年上工第一天，记录一下。
el-select下拉框传值同时传key和value
qq5678574的博客
07-23 5347
<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获取id和name
weixin_51722520的博客
11-03 3256
el-select获取多个值
el-select同时获取value和label的值同时传值给后端
Cherry
11-23 4005
el-select同时获取value和label的值同时传值给后端
实现省市区三级联动选择器的设计与应用
标题和描述中提到的“省市区三级选择器”是一种特定的用户界面组件，它常被用于填写地址信息的表单中，允许用户在选择一个省（或州、自治区）之后，自动或手动选择相应的市（或地区），然后继续选择区（或县）。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值