elementUI的el-select传递item对象或其他参数的4种方法

已于 2025-07-07 09:51:58 修改
阅读量6.4k 收藏 25
点赞数 16
CC 4.0 BY-SA版权
分类专栏： 前端项目教程以及代码 文章标签： elementui 前端 javascript vue.js 前端框架
于 2024-01-28 13:47:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23073811/article/details/135882480

方法1 :value=“item” 绑定对象

只要:value绑定item对象就可以
在这里插入图片描述
value-key="value" 必须是item里的一个属性，绑定值为对象类型时必填

 <el-select v-model="value" placeholder=
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Element-UI Select组件使用value-key属性，让绑定值可以为一个对象
一碗清深的博客
07-10 1169
Element-UI Select组件使用value-key属性，让绑定值可以为一个对象
vue2踩坑记录：el-select如何绑定对象
l_q_l的专栏
08-30 1670
所以，需要你告诉它，通过哪个键值来判断你选中的这个对象跟上一个选中项之间是否发生了变化，所以，其值与el-option中的Key保持一致即可。所以不能只绑定用户Id，需要绑定整个item(用户对象)，这样每次change事件所获取到的newValue是整个对象，而且v-model中的变量指向的也是整个对象，方便后续操作。但是绑定对象后，无法正确响应，点击第一个选项时，页面显示选中的是第一个人，但是后台data是正确的。原来，这时必须添加value-key属性，作为 value 唯一标识的键名。
给el-select的change事件传自己想要的参数
weixin_45776308的博客
01-12 5314
例如：校验函数 正常使用时我们会只传前面三个参数，后面想获取当前的index的值，必须把自身的四个参数全写，第五个参数index才是我们自己的参数。return callback(new Error("下架时间不得早于上架时间"));return callback(new Error("请选择当前以后的时间"));可以写成箭头函数： @change="(e) => changeUp(e, is)"placeholder="选择日期时间"需要把该函数的参数全部写完之后，后面的参数才是自己传的参数。
vue3 el-select el-option 使用
最新发布
往事知多少？
08-06 349
在 Vue 3 中，el-select是 Element Plus 组件库中的一个选择器组件，它允许用户从下拉菜单中选择一个或多个选项。如果你想在使用 Vue 3 和 Element Plus 时让el-select支持多种选择（即多选），你可以通过设置multiple属性来实现。以下是一些基本的使用方法和示例。
el-select 选择一条数据后，把其余数据带过来
CMDN123456的博客
08-30 1155
el-select 选择一条数据后，把其余数据带过来
vue2：el-select中的@change事件如何传入自定义参数
l_q_l的专栏
12-06 2845
1、template中定义事件响应函数时，指定选中项值的参数名称。如下：通过（newVal）指定参数‘newVal’为传入的选中项，那么另一个参数row即是传入的自定义参数。根据打印结果可看出，newVal是当前的选中项，而row是我当前传入的自定义参数。此时仅根据变量名称判断，变量位置可任意。比如，row和newVal的位置互换，写成。默认传入的是选中项的值（如果是多选，则传入一个数组）但是有些时候需要传入额外的自定义参数，可以通过如下方式实现。也是可以的，只要函数的实现与调用处保持一致即可。
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
王小工小工历程
06-14 1074
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
element-ui Select 组件传递对象
weixin_30894389的博客
09-04 628
element-ui 官方文档关于select绑定对象有如下描述 然而并没有Demo - - 经查找资料 <el-select value-key="Id" v-model="submitData.CostType" placeholder="请选择类型" @change="show" > <el-option v-for="item in allcostT...
select的change方法如何传递多个参数
qq_43625134的博客
01-30 6054
方法的回调函数只有当前选择的val，如果想再传入自定义参数怎么办？不能够传入自定义的参数，在进行某些操作时，会比较困难，下面是。element-ui中的。
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
总结一下，当使用Vue + Element-ui的下拉框`el-select`时，通过`@change`事件结合`$event`参数可以获取到选中的值，而通过额外传递的参数（如`scope`或自定义值）则可以获取到更多上下文信息。这种技巧适用于那些...
使用elementUI el-select时踩的一个小坑
weixin_42520314的博客
07-18 1756
卤煮使用vue-elementUI时使用el-select,从后台读取数据渲染el-option的value和lable,当卤煮编辑页面是需要从后台取到传给后台的value值，然后卤煮想让el-option显示的是lable值。 <el-select class="height40" v-model....
ElementUI中el-select请求springboot后台数据显示下拉项并在el-table中格式化显示
BADAO_LIUMANG_QIZHI的博客
08-06 3622
场景 Vue+ElementUI+axios+SpringBoot前后端分离的后台管理系统。 将表格中某字段类似于状态等需要关联字典表进行筛选查询时。示例如下 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先实现前端页面下拉框赋值 在页面上添加一个el-table <el-form-item label="调动类别" prop="...
Element: el-select 多选传值
weixin_54362826的博客
08-04 1288
修改前： 修改后： <el-form-item label="项目维保员" prop="groupUserList"> <el-select v-model="ruleForm.groupUserList" placeholder="请选择维保员" multiple> <el-option v-for="item in groupUserL.
el-select组件传递对象值
xjh01的博客
10-03 2551
使用el-select组件时，如果不加特别配置，选项里的对象都是蓝色，为选中状态。 这时，需要在<el-select>里添加 value=key="id"项 ，然后在option里面的key = id，这样就可以正常传递对象值了 如下图： <el-select v-model="selected_item" value-key="id" style="width: 150px;" clearable filterable :loading="loading" > <el-o
element-ui el-select组件 传递多个数据
Binglianxiaojiao的博客
10-15 653
el-select下拉框在项目中是常用到的一个下拉框组件，通过v-model绑定对应的值即可简单完成使用。 但是往往会在一些业务需求上，我们得记录多个值时，单独绑定一个值往往已经满足不了我们的开发需求。
el-select传递多个参数_带参数的查询-MyBatis(7)
weixin_35696012的博客
01-19 998
1. 带参数的查询如果执行的是条件查询, 需要在调用方法时传参数进来, 此时, 可以在select标签中通过parameterType属性指定参数的类型. 而在 SQL 语句中, 可以通过#{}的方式获取参数.1.1 一个参数的查询例如, 根据 id 查询用户信息. 当只有一个参数时, #{}中可以任意填写.<!-- parameterType, 参数类型, 用于参数的传递 -->...
el-select如何在el-option中传递对象
weixin_62273462的博客
04-01 1074
el-select需要注意的事项
vue2 element-ui select下拉框 选择传递多个参数
m0_65730686的博客
12-05 1349
vue2 element-ui select下拉框 选择传递多个参数
Element-ui的select下拉框传递多个参数方法
一个超爱喝可乐的web前端攻城狮
04-16 4719
Element-ui的select下拉框传递多个参数方法 <el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="currentSel"> <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option> </el-select&
Vue3+ElementUI使用el-select multiple 单选或多选，点击编辑后弹框回显数据
06-10
如果你在Vue3和ElementUI中使用el-select组件的multiple属性进行单选或多选，并且想要在点击编辑按钮后，弹出一个弹框来显示选择的结果，可以使用ElementUI的Dialog组件来实现。具体步骤如下： 1. 在父组件中，给el...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderYYY

请简单粗暴地爱我，一元一元的赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值