el-select 中 v-model 绑定的值以及如何进行回显

川长思鸟来 2022-11-10 05:23 376阅读 0赞

# [el-select 中 v-model 绑定的值以及如何进行回显][el-select _ v-model] #

**1.v-model绑定的是某个值的时候，无可厚非，可以拿对应的值进行回显**

**2.当需要使用options里面其他属性的时候，v-model绑定单个值无法解决需求的时候，需要绑定成对象**

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

<el-select v-model="selected" value-key="id" >
                 <el-option value="" label="请选择" />
                 <el-option
                    v-for="item in options"
                    :key="item.id"     
                    :label="item.name"
                    :value="item"
                 />
        </el-select>

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

:value对应的值是v-model绑定的值，**item此时是个对象**，因此在取用选中这个对象中的其他数据的时候会非常方便。

**回显：**在回显的时候v-model**绑定的值也必须是对象，也就是selected必须是个对象**，且这个对象中必须含有value-key中绑定的属性（同名）

**value-ley中绑定的属性名对应着:key中的属性名**，回显对象中的  \{value-key绑定的属性值 = :key中绑定的对象的值\}，即可回显成功  ** value-key 中的名称需和:key值保持一致**

selected:{ id: response.result.id }
    //对象中必须有id属性，存在其他属性也不会影响回显
    //这样即可回显

[el-select _ v-model]: https://www.cnblogs.com/yxkNotes/p/11584842.html
[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221023/477235a9f50b463fbb50357aee01756f.png

发表评论取消回复

表情：

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

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

相关阅读

相关如何在 Windows 命令行中以不同的颜色进行回显

在 Windows 的命令提示符下 (cmd)，可以通过使用 ANSI 转义序列来实现每行回显不同颜色。具体来说，可以使用类似以下的 ANSI 转义序列： [32m需

青旅半醒/ 2024年03月22日 08:33/ 0 赞/ 5 阅读

相关 Thymelaf中使用select进行消息的回显

场景在进行新增和编辑时，如果后台有传递到前端值，则根据值的内容选中下拉框。实现 <select class="form-control" name="

女爷i/ 2023年10月18日 20:09/ 0 赞/ 28 阅读

相关 vue3数据回显与双向绑定

vue3版本中是实现数据绑定为通过新的ref与reactive函数实现 <template> <div> <a-button type="

待我称王封你为后i/ 2023年10月11日 15:21/ 0 赞/ 9 阅读

相关 el-select 中 v-model 绑定的值以及如何进行回显

[el-select 中 v-model 绑定的值以及如何进行回显][el-select _ v-model] 1.v-model绑定的是某个值的时候，无可厚非，可以拿对

川长思鸟来/ 2022年11月10日 05:23/ 0 赞/ 377 阅读

相关 Vue中自定义组件和new Vue中的data值进行绑定

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例

小灰灰/ 2022年10月31日 10:57/ 0 赞/ 127 阅读

相关 JavaScript之input值的回显

原意是想获取input的值，然后判断值的长度，如果不在3到6位之间就把值置为空，若如下代码实现不了：用户名:<input type="text" name="use

悠悠/ 2022年05月30日 07:26/ 0 赞/ 767 阅读

相关 vue 获取绑定值

<ul class="product-time clearfix pull-right" style="margin-right: 10px;"> <l

一时失言乱红尘/ 2022年05月26日 08:25/ 0 赞/ 143 阅读

相关 Vue-值绑定

vue 值绑定（1）:v-bind用于绑定属性和数据其缩写为“ : ” 也就是v-bind:id === :id （2）v-model用在表单控件上的，用于实

喜欢ヅ旅行/ 2022年05月17日 03:41/ 0 赞/ 150 阅读

相关 Vue值绑定

值绑定概述复选框单选按钮选择框的选项概述对于单选按钮，复选框及选择框的选项，`v-model` 绑定的值通常是静态字符串

深藏阁楼爱情的钟/ 2021年10月20日 01:12/ 0 赞/ 266 阅读

相关 SpringMVC【参数绑定、数据回显、文件上传】

前言本文主要讲解的知识点如下：参数绑定数据回显文件上传参数绑定我们在Controller使用方法参数接收值，就是把web端的值给接

曾经终败给现在/ 2021年09月15日 01:02/ 0 赞/ 302 阅读