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

川长思鸟来 2022-11-10 05:23 431阅读 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 条评论，431人围观）

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

相关阅读

相关 Vue中如何进行样式绑定？

Vue中如何进行样式绑定？在Vue中，我们可以很方便地进行样式绑定。样式绑定是将CSS样式与Vue组件中的数据进行关联的一种技术。通过样式绑定，我们可以根据组件的状态动

- 日理万妓/ 2024年03月16日 16:26/ 0 赞/ 15 阅读

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

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

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

相关 Thymeleaf （select、checkbox)数据绑定和数据回回显

第一种情况：select 数据绑定：前端页面： <div class="col-sm-10"> <select name="type" id=

矫情吗；*/ 2023年10月18日 18:37/ 0 赞/ 54 阅读

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

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

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

相关 el-checkbox label绑定对象回显

你可以用原生的写自己处理一下样式吧！！ <span v-for="tag in item.teachers"> <input t

清疚/ 2023年02月16日 15:27/ 0 赞/ 47 阅读

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

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

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

相关 JavaScript之input值的回显

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

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

相关 Vue-值绑定

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

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

相关 Vue值绑定

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

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

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

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

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