vue2使用element-ui的el-select组件传递参数和对象

最新推荐文章于 2024-05-16 22:25:50 发布
最新推荐文章于 2024-05-16 22:25:50 发布
阅读量4.9w 收藏 27
点赞数 8
分类专栏： element-ui 文章标签： el-select绑定对象 element-ui的el-select使用 select传多个参数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39692256/article/details/81909708
版权

el-select组件官方实例中只能通过value绑定传递一个参数

在线实例展示：https://jsfiddle.net/1erjhcL3/655/

 

在有些使用场景中需要同时用到对象中的两个参数（id和name）

首先想到的是同时绑定这两个参数，一起传递，官方文档没有可以直接使用的属性或方法

换个角度思考，将包含两个参数的对象作为value的绑定

官方文档提供value-key属性实现此功能

此属性写在select上，作为value唯一标识的键名

收手吧阿zu
关注
  • 8
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
el-select组件传递对象值
xjh01的博客
10-03 2315
使用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
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
【el-select想在change事件上传递option对象（vue 3中@click.native 已废弃[deprecated]）】
weixin_45658815的博客
03-11 474
看了许多文章，比较有效的是给el-option绑定@click.native，但是在vue3中修饰符已经被移除，所以需要使用v-on:click。
elementUI的el-select传递item对象或其他参数的3种方法
coderYYY的博客
01-28 2998
3种方法实现el-select传递除了value的其他参数
el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇_el-option v-for(1)
最新发布
2401_85014396的博客
05-16 666
【代码】el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇_el-option v-for(1)
element-ui Select 组件传递对象
weixin_30894389的博客
09-04 562
element-ui 官方文档关于select绑定对象有如下描述 然而并没有Demo - - 经查找资料 <el-select value-key="Id" v-model="submitData.CostType" placeholder="请选择类型" @change="show" > <el-option v-for="item in allcostT...
el-select如何在el-option中传递对象
weixin_62273462的博客
04-01 829
el-select需要注意的事项
vue+element-ui select组件传对象
u013746071的专栏
04-25 3812
应用场景： 在使用选择组件 select 的时候：如果想要绑定的值，是一个对象，这样就可以获取整个对象，然后获取所需要的值进行赋值。 可以如下操作： value直接绑定 对象item，但是需要注意的是：在select 上要加上属性：value-key,他对应的值，是:key="" ，所绑定的，不然就会有问题。 注意：在编辑的时候，如果select 需要展示值的话，必须给 addForm.city...
vue.js下使用element表单，设置select的选项为对象传给后台
weixin_38684316的博客
04-19 5327
  给大家分享下当时设置select选项为对象的坑 ` &lt;el-form-item label="label标签名字:"&gt; &lt;el-select v-model="formData.jsonStr" value-key="desc（此值必须设置，不设置会有bug，此值是原数据类型中的唯一键）" placeholder="请选择"&gt; &lt;el-
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
总结一下，当使用Vue + Element-ui的下拉框`el-select`时，通过`@change`事件结合`$event`参数可以获取到选中的值，而通过额外传递的参数（如`scope`或自定义值）则可以获取到更多上下文信息。这种技巧适用于那些...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
Vue 二次封装 Element-UI 的 el-select 父子传值
Java Pro
05-24 2959
Vue 二次封装 Element-UI Select 组件子组件示例代码父组件调用封装的子组件 子组件示例代码 <template> <div> <el-select v-model="childValue" placeholder="请选择" filterable @change="onChange" > <el-option v-for="item in option
el-select传递多个参数_带参数的查询-MyBatis(7)
weixin_35696012的博客
01-19 903
1. 带参数的查询如果执行的是条件查询, 需要在调用方法时传参数进来, 此时, 可以在select标签中通过parameterType属性指定参数的类型. 而在 SQL 语句中, 可以通过#{}的方式获取参数.1.1 一个参数的查询例如, 根据 id 查询用户信息. 当只有一个参数时, #{}中可以任意填写.<!-- parameterType, 参数类型, 用于参数的传递 -->...
vue中el-select将选中的值传递到需要的位置
qq_43532275的博客
03-28 5144
方法一 <el-form-item label="选择员工"> <el-select v-model="deptPersonValue" @change="changeDeptValue"> <el-option v-for="item in employeeList" :key="item.employeeId" :label="item.name" :value...
Vue+ElementUI el-select选择器：绑定的值为对象
weixin_52950296的博客
11-08 7554
Vue+ElementUI el-select绑定值为对象
Mybatis之参数传递
ljf12138的博客
11-04 1551
传递参数6种方式：（以select为例） 1.传递单个简单类型的参数（掌握） 2.传递多个简单类型的参数（掌握） 3.传递对象类型的参数（掌握） 4.传递位置代表参数 5.传递Map类型的参数 6.使用${ }代表参数 7.分页实例 ============================================================= 以下介绍都使用表stud...
el-select获取多个参数/el-select传多个参数
weixin_45654407的博客
05-11 6833
element select选择器~~ el-select的change事件默认不传参数时可获取到值是选中的值。 @change="handleSelectGroup" 当涉及到循环动态生成多个select组件并且想要获取到当前所选的组件是哪个的时候，就需要从select的change事件获取到多个参数，一般需要传上当前选中的值与当前索引。 方法一： $event 即是当前所选的值 @change="handleSelectGroup($event, i)" 方法二： val 即是当前所选的值 @cha
element-select 组件，选择一项，传多个值
HZM_CSDN的博客
06-14 424
el-select传值
vue + element-ui的下拉框el-select获取额外参数
09-05
在Vue中使用Element-UI的下拉框（el-select）组件时，想要获取额外的参数可以通过以下步骤实现： 1. 在下拉框的选项列表（el-select标签、el-option标签）中，可以通过使用自定义属性来保存额外的参数。例如，可以为每个选项设置一个名为"data"的自定义属性来存储额外参数的值。 示例代码： ```html <el-select v-model="selectedValue"> <el-option v-for="item in options" :key="item.value" :data="item.data" :label="item.label" :value="item.value"></el-option> </el-select> ``` 2. 在Vue组件中，可以使用`@change`事件来监听下拉框的选择变化。在事件处理方法中，可以通过`event.target.querySelector('.el-select-dropdown .el-dropdown-menu__item.hover')`来获取当前选中的选项元素。 示例代码： ```javascript methods: { handleSelectChange(event) { const selectedItem = event.target.querySelector('.el-select-dropdown .el-dropdown-menu__item.hover'); const extraParam = selectedItem.getAttribute('data'); // 处理获取到的额外参数 } } ``` 以上就是获取额外参数的简单方法，可以根据实际需求对其中的代码进行扩展和优化。通过这种方式，我们可以在Vue中使用Element-UI的下拉框组件，并且能够获取到额外的参数值以满足业务需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值