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

梦里梦外; 2022-10-09 06:30 138阅读 0赞

## 前言 ##

> `<el-select>` 组件文档：[https://element.eleme.cn/\#/zh-CN/component/select][https_element.eleme.cn_zh-CN_component_select]

大部分情况下，`<el-option>` 会配置 `lable` 属性用于展示，而 `value` 则是选中后返回的数据。

但是，`value` **只能返回单个数据**，并不能返回多个参数（或整个 `item` 对象）。

<el-select v-model="selectedDevice">
         <el-option v-for="(item, index) in deviceList" :key="index" :label="item.name" :value="item.id" >
         </el-option>
    </el-select>

如上代码所示，如果直接将 `value` 属性的值设置为 `item`，会造成点击一个项全部选中问题（没有唯一标识）。

## 返回整个item ##

![在这里插入图片描述][20210624114303754.png]

其实，只需要在 `<el-select>` 设置 `value-key` 属性即可。

<el-select v-model="selectedDevice" value-key="id">
         <el-option v-for="(item, index) in deviceList" :key="index" :label="item.name" :value="item.id" >
         </el-option>
    </el-select>

[https_element.eleme.cn_zh-CN_component_select]: https://element.eleme.cn/#/zh-CN/component/select
[20210624114303754.png]: /images/20221005/ea2a9ea1b04a4637b238ca1fa1698ce8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementui 实现选中一行编辑

可以使用 Element UI 的 `el-table` 组件来实现选中一行编辑的功能。首先，在表格的每一行中添加一个可编辑的单元格或者按钮，用来触发编辑功能。然后，在

超、凢脫俗/ 2024年03月25日 12:14/ 0 赞/ 96 阅读

相关 elementui form-item中多个字段校验

preface 前两天太忙了，今天重新整理了下需求 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad

旧城等待，/ 2023年02月15日 15:55/ 0 赞/ 39 阅读

相关 java 返回多个值_java如何从方法返回多个值

importjava.util.HashMap;importjava.util.Map;public classTest \{/\\\ 方法1：使用集合类 (Map以外的集合类

柔情只为你懂/ 2022年11月01日 15:00/ 0 赞/ 273 阅读

相关 vue+elementui 如何刷新整个界面

在这里当我们上传图片再对图片进行回显的时候，当前这个vue文件还是可以得到这个图片的地址从而进行回显的，而当我们一个界面是由两个vue构成的呢？那么另一个vue该怎么进行重新加

以你之姓@/ 2022年10月25日 12:57/ 0 赞/ 523 阅读

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

前言 > `<el-select>` 组件文档：[https://element.eleme.cn/\/zh-CN/component/select][https_ele

梦里梦外;/ 2022年10月09日 06:30/ 0 赞/ 139 阅读

相关 java如何从方法返回多个值

本文介绍三个方法，使java方法返回多个值。方法1：使用集合类方法2：使用封装对象方法3：使用引用传递示例代码如下： import ja

朴灿烈づ我的快乐病毒、/ 2022年06月14日 02:36/ 0 赞/ 319 阅读

相关 elementUI select 默认选中

`v-model`的值为当前被选中的`el-option`的 value 属性值 <template> <el-select v-model="value

ゝ一纸荒年。/ 2022年05月30日 12:13/ 0 赞/ 623 阅读

相关一个滑动选中RecyclerView中Item的布局SlidingCheckLayout，手指滑过Item时多项选中。

github：https://github.com/homgwu/SlidingCheckLayout 示例 ![sliding.gif][] 特性 Sl

柔光的暖阳◎/ 2022年05月24日 09:15/ 0 赞/ 217 阅读

相关 python返回多个返回值

返回多个值函数可以返回多个值吗？答案是肯定的。比如在游戏中经常需要从一个点移动到另一个点，给出坐标、位移和角度，就可以计算出新的新的坐标： import

╰半夏微凉°/ 2022年01月25日 15:45/ 0 赞/ 379 阅读

相关使用bmob后端云中listview如何实现数据显示在第一个item

我最近在做一个小项目，使用了bmob后端云，方便了很多，其中遇到一个问题就是从数据库查询到数据之后如何让刚发表的帖子显示在listview列表的顶端也就是从上至下排序，其实很简

╰半夏微凉°/ 2021年09月11日 07:58/ 0 赞/ 228 阅读