ElementUI - ＜el-select＞ / ＜el-option＞ 如何选中后返回多个数据 / 整个item

已于 2025-08-10 15:26:30 修改
阅读量5.3k 收藏 3
点赞数 3
CC 4.0 BY-SA版权
分类专栏： + ElementUI 文章标签： elementui vue.js 前端
于 2021-06-24 11:44:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/118182878
本文介绍了如何在 Element UI 的 <el-select> 组件中，通过设置 `value-key` 属性来正确返回包含多个参数的选项对象。默认情况下，`value` 只能返回单个数据，但通过设置 `value-key`，可以指定一个唯一的标识（如 `id`），以避免全选问题，同时保持返回整个 item 对象的能力。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

了解本专栏 订阅专栏 解锁全文
element-ui使用select组件同时选中多个值
Fourierrr_的博客
06-02 4832
发现问题 首先我们来看一段最基本的el-select代码 <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in food" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>
el-option 选中内容为对象及回显的实现
sinat_33255495的博客
04-24 1007
而选择事件默认又会插入对象到数组中，所以就需要在事件中单独处理一下这个选中的数据了。如果想正确展示的话，需要处理 value1List 的格式为 简单数组，例如。支持选择内容为对象，只需 value 绑定对应的对象即可。如果想实现选中的内容为对象的话，那么官方。
解决el-select需要取多个值的问题
九段刀客的博客
11-30 2179
使用JSON.stringify 和 JSON.parse 转换 <el-select v-model="form.roleName" @change="change_role"> <el-option v-for="item in options_role" :key="item.id" :label="item.roleName" :value="J
el-select、el-option容易没注意到的小问题
qq_53245353的博客
07-02 192
最近一直在写后台，用的都是elementplus，使用选择框组件el-select 的时候，发现表单回显的时候，选择框一直展示value，而不是展示label。后面检查了好久才发现类型不一样，form.activityCategorize是Number,cateList里面的数据本来是Number，后面在我转换的过程中变成了string，所以造成了这种情况。碰到选择框一直展示value，而不是展示label，这种情况先检查数据是否匹配，数据类型是否匹配，再检查数据渲染的问题。
element 组件 el-select option传多个值问题.
zzw123456sxy的博客
08-01 314
后端回显不想要多表联查的话需要我们吧地区id 和地区名称直接返回存入数据库。可以使用多个传值方法。
el-select下拉框 change事件返回该项所有数据
m0_70265923的博客
01-03 7926
【代码】el-select change事件返回全数据。
在表格中使用el-select选中获取options中的item实现数据回显
Caoshilong1的博客
08-17 2777
scope.row.commodityName让表格中这个值为一个对象，再通过。事件监听器来捕获选项变化，并通过回调函数获取选中的。对象，可能是因为选项的值使用了字符串类型。，导致无法正确匹配选项。属性，绑定一个方法以监听选项变化。如果在回调函数中无法正确打印出。对象，以便正确获取整个选中的。把表格整行数据带入实现。绑定的是字符串类型的。
<!-- 表单区域,其中label是展示给用户看的,value是提供给后台的,值通常是id --> <el-form inline> <!-- 分成三个el-form-item,分别是文章分类的下拉菜单,发布状态的下拉菜单,和按钮区 --> <el-form-item label="文章分类："> <el-select> <el-option label="新闻" value="111"></el-option> <el-option label="体育" value="222"></el-option> </el-select> </el-form-item> <el-form-item label="发布状态："> <el-select> <el-option label="已发布" value="已发布"></el-option> <el-option label="草稿" value="草稿"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary">搜索</el-button> <el-button>重置</el-button> </el-form-item> </el-form>如何设置下拉菜单的宽度?
05-31
2.使用CSS类来统一设置多个el-select的样式。 3.调整下拉菜单的宽度，可能需要用到popper-class。4.确保样式作用域正确，避免被其他样式覆盖。 可能需要提供代码示例，展示如何同时设置输入框和下拉菜单的宽度。...
<el-col :span="24" ><div class="grid-content bg-purple"> <el-form-item label="机构地址"> <el-col :span="8"> <el-select v-model="form.region" placeholder="请选择省"> <el-option label="区域一" value="shanghai" ></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-col> <el-col :span="8"> <el-select v-model="form.region" placeholder="请选择市"> <el-option label="区域一" value="shanghai" ></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-col> <el-col :span="8"> <el-select v-model="form.region" placeholder="请选择县/区" > <el-option label="区域一" value="shanghai" ></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-col> </el-form-item></div ></el-col>为什么无法选中input框
06-11
因此，当你在其中一个 `el-select` 中选择了一个选项时，其他两个 `el-select` 的选项会被重置，看起来像是无法选中。 要解决这个问题，你需要为每个 `el-select` 组件绑定不同的变量，例如： ```html <el-select ...
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px"> <el-form-item label="订单号" prop="orderNo"> <el-input v-model="queryParams.orderNo" clearable placeholder="请输入服务订单号" /> <!-- <el-input v-model="queryParams.serviceCategory" clearable placeholder="请输入姓名" /> --> </el-form-item> <el-form-item label="服务类别" prop="type"> <el-select v-model="queryParams.type" placeholder="请选择订单服务类别"> <el-option label="旅居" value="旅居"></el-option> <el-option label="陪诊陪护" value="陪诊陪护"></el-option> <el-option label="动态康养" value="动态康养"></el-option> <el-option label="老年大学" value="老年大学"></el-option> </el-select> </el-form-item> <el-form-item label="服务名称" prop="name"> <el-input v-model="queryParams.name" clearable placeholder="请输入服务名称" /> <!-- <el-input v-model="queryParams.serviceCategory" clearable placeholder="请输入姓名" /> --> </el-form-item> <el-form-item label="订单时间" prop="time"> <el-date-picker type="date" placeholder="订单时间" v-model="queryParams.time"></el-date-picker> </el-form-item> <el-form-item label="订单状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择订单服务订单状态"> <el-option label="待付款" value="待付款"></el-option> <el-option label="已付款" value="已付款"></el-option> <el-option label="已完成" value="已完成"></el-option> <el-option label="已关闭" value="已关闭"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form>用el-row和el-col让这里面的均匀分配位置
03-27
例如，将每个el-form-item放在一个el-col中，然后整个组放在el-row里。需要注意不同屏幕尺寸下的响应式布局，可以使用xs、sm、md、lg等属性来调整在不同设备上的显示。 另外，按钮部分可能需要单独处理，放在最后一...
<el-row style="margin-top:20px"> <el-form :inline="true" label-width="100px"> <el-row> <el-col :span="24"> <trible-time-range-picker v-on:trible-date-picker-event="tribleDatePickerEvent"></trible-time-range-picker> </el-col> </el-row> <el-row> <el-form-item label="EE Section" prop="EE_section" > <el-select v-model="Search.EE_section" clearable multiple collapse-tags placeholder="默认全选" > <el-option v-for="item in BaseOption.EE_section" :key="item.value_1" :label="item.label" :value="item.value_1"> </el-option> </el-select> </el-form-item> <el-form-item label="PE Section" prop="PE_section"> <el-select v-model="Search.PE_section" clearable multiple collapse-tags placeholder="默认全选" > <el-option v-for="item in BaseOption.PE_section" :key="item.value_1" :label="item.label" :value="item.value_1"> </el-option> </el-select> </el-form-item> <el-form-item label="Tool ID" prop="EQP"> <el-select v-model="Search.EQP" clearable multiple collapse-tags filterable placeholder="默认全选"> <el-option v-for="item in BaseOption.EQP" :key="item.value_1" :label="item.label" :value="item.value_1"> </el-option> </el-select> </el-form-item> <el-button type="primary" v-on:click="query">查询</el-button> <el-button type="primary" v-on:click="Export">导出</el-button> </el-row> </el-form> </el-row>解释这段代码
最新发布
08-05
5. **Vue.js的单文件组件**：每个.vue文件由三个部分组成：`<template>`（模板）、`<script>`（脚本）和`<style>`（样式）。模板部分使用HTML和Element UI的组件标签；脚本部分定义组件的逻辑；样式部分定义组件的...
el-select 获取点击项的整个对象item
weixin_56516864的博客
03-28 1865
默认来说，change函数，只能获取到id的值，想要获取整个item的值，就要利用value-key属性。
Vue el-select 下拉框 @change 多参数返回
weixin_41306215的博客
04-24 3371
最近在做毕业设计，终于知道平时不好好学习的后果，就是很多代码逻辑不清晰 分析不透彻，导致很多细节一弄就弄半天 不说了，直接把坑给记录下来，免得以后再次踩坑 <el-form-item label="所属小区栋数" prop="building"> <el-select ref="sel" v-model="user.building" @focus="selectBuilding()" @change="setBuilding($event.
element ui中select选中的值，获取对应的数据进行返回
骨子里的偏爱
03-13 407
element ui中select选中的值，获取对应的数据进行返回
el-select下拉框同时传两个甚至更多值给后端
weixin_56733569的博客
07-19 3112
el-select下拉框传多个值给后端
vue 基于elementUI的选择组件el-select中@change事件返回对象方法
热门推荐
蜗牛快爬
07-11 6万+
el-select的选择以后返回对象实现方法郁闷的开始 郁闷的开始 人一旦出现死脑筋，就会非常累。今天我就出奇的郁闷，上次遗留的一个问题，周末正好有时间，想好好看看解决掉他，打开代码，各种尝试，调试，就是没好转，自己心里开始发牢骚，就一个选择事件返回对象问题都解决不了，简直。。。。内心无数次自责，辱骂。。。 下面先看一下需求： 说是有个值班表单，里面要进行值班人员下拉，下拉就下拉吧，他还得再下拉选择以后要把这个人的电话号码也查出来，真烦人，本来很简单的问题，有得用脑子。。。 说实话真不难，不就是将电话号码
vue 中 element-ui 选择框el-select传递两个参数
即使再小的舟,也能远航
01-08 388
注意 ::: 当 label value 属性名字更改时 要加上 在 value-key="id"
Vue+Element下弹出框选择值后返回值的实现
humors221的专栏
03-13 3187
一、测试环境： 1.VUE 2.Element 二、功能描述： 弹出选择框，选择一条记录，点击确定，把记录的值返回到页面 三、关键代码： 1.父页面： <template> <el-button icon="el-icon-add" size="small" type="primary" @click="openDialog">选择</el-button> <el-dialog title="选择" :visible.sync="dialogVisi
elementUI的el-select选择器同时返回选中项的value和label值
weixin_43734732的博客
11-08 1万+
<el-select v-model="ruleForm.category" @change="selectedCag" placeholder="请选择项目类别"> <el-option v-for="item in ClaOptions" :key="item.value" :labe...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

蔡来了

请作者喝杯咖啡 :)

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

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

打赏作者

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

抵扣说明：

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

余额充值