关于el-option输入框的值和v-model的值

最新推荐文章于 2024-03-15 19:44:27 发布
最新推荐文章于 2024-03-15 19:44:27 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： vue 文章标签： v-model el-option 表单数据 Vue 自定义属性绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanren201/article/details/115336451
版权

先说结论：v-model的值是当前被选中的el-option的value属性值，输入框中显示的为label的属性值
在这里插入图片描述
而如果要把选择器的所选选项当作表单数据的一部分，那么可以像下面这样，把表单对应的数据项和v-model绑定：
在这里插入图片描述
比如我自定义的表单form有个timeout属性值，并且要把这个选择器的所选值作为这个属性的值，那么就这样v-model="form.timeout"即可

阿袁的小园子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
让el-option和el-select宽度保持一致
qq_37635012的博客
04-04 2221
有时候我们用elementUI时会发现，el-option宽度总是达不到100%，就算你给它设置了宽100%一样不生效。如果 el-select 宽度不确定，可以在 focus 时获取 el-select 宽度，赋值给 el-option。原理：DOM挂载完毕后，获取 el-selcet宽度，并赋值给 el-option。
el-form内el-select与el-input纵向不对齐的问题
skysys的研究小屋
02-07 4944
解决方法 <el-form :model="form" label-width="100px" size="small"> <el-col :span="8"> <el-form-item label="test1"> <el-input v-model="form.value1" autocomplete="off"></el-input> </el-form-item> </el-c
el-select默认选中 直接绑定将option中的value值绑定给v-model
极客鼠之家
08-22 1283
1、效果图 2、源码实现 <template> <div> <el-select v-model="query"> <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label" ></el-option> </e
v-model在select和option、el-select和el-option中的使用。（vue使用el-select和el-option实现搜索框）(默认选择数组前四个数据）
qq_56715703的博客
07-04 2544
单选时，如果v-model表达式的初始值未能匹配任何选项，select元素将被渲染为“未选中”状态。在ios中，会使用户无法选择第一个选项，因为在这样的情况下，ios不会触发change事件。v-model：在表单元素上创建双向数据绑定。v-bind可以把值绑定到Vue实例的一个动态property上，其值可以不是字符串。特点：总是将vue实例的数据作为数据来源—>data中声明的值。其selected的值会根据选择的option的值来变。
elementui select数据回显，v-model的值类型需要和下拉的value的类型一致；
wangaiwen的博客
03-20 427
elementui select数据回显，v-model的值类型需要和下拉的value的类型一致；
select的option的值，获取得到的value值类型，更改前后不一样？
丫丫不秃头噢---
05-13 1293
今个改项目的时候，发现个奇怪现象：：???????? 我在option初始显示的时候，得到的seleced是个number类型，但是我单机下拉框更改option的选项之后，得到的值的类型就从number变成了number类型。就很奇怪，折腾我????????????????????找了半天问题产生的原因，尝试了各种办法。 <div class="speed"> 云台速度 <select v-model="selected" @ch
修复ElementUI中el-select与el-option无法通过v-model实现数据双向绑定的问题
最新发布
xiaoqian7758258的博客
03-15 1002
修复ElementUI中el-select与el-option无法通过v-model实现数据双向绑定的问题
el-select 中 v-model 绑定的值以及如何进行回显
wwf1225的博客
03-16 4975
el-select 中 v-model 绑定的值以及如何进行回显 1.v-model绑定的是某个值的时候，无可厚非，可以拿对应的值进行回显 2.当需要使用options里面其他属性的时候，v-model绑定单个值无法解决需求的时候，需要绑定成对象 <el-select v-model="selected" value-key="id" > <el-option value="" label="请选择" /> <el
vue中input输入实时筛选el-option的内容
weixin_44986077的博客
11-05 2254
上方输入下面的输入框自动检索自动匹配（下面的下拉框是接口数据），下面直接进行上代码 <el-select v-model="form.name" size='mini' placeholder="请选择" > <el-input size="mini" style="padding:5%" v-model="inputXie" @input="focusCustomer()" .
Element UI学习2--input输入框
hanrabbit的博客
01-06 1076
1、基础用法 <template> <div> <el-input v-model="input" placeholder="请输入内容"></el-input> </div> </template> <script> export default { name:'input', data(){ return{ input:''
el-Input输入框添加下拉框（可输入、可选）
04-01
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> export default { data() { return { options: [ { value: 'option1'...
el-select 中 v-model 绑定的值与如何进行回显
diehange3086的博客
09-25 8395
1.v-model绑定的是某个值的时候，无可厚非，可以拿对应的值进行回显 2.当需要使用options里面其他属性的时候，v-model绑定单个值无法解决需求的时候，需要绑定成对象 <el-select v-model="row.selected" value-key="id" placeholder="请选择" > <...
Element 踩坑--value和label赋值不一致，分别为id,name，传入id时，不会显示该id对应的值
weixin_38779534的博客
11-15 1273
需求是这样的，我要在添加产品成功之后，带着产品类别的catId跳转到产品页面以查询此类别下的产品，这不是很简单吗，不是传进来就行了吗，OK，我们来look一look <template> <el-select @change="cateOneChange" v-model="catId" :placeholder="defaultClassOneName" size="...
element UI的带输入建议el-autocomplete总结（详细，全）
seimeii的博客
07-26 2284
https://blog.csdn.net/fenger_c/article/details/108572690?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165879619016782390571873%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165879619016782390571873&biz_id=0&utm_medium
解决el-select使用v-model绑定的数据被赋值后，显示赋值内容，而不是el-option中对应value的内容
freezing_forever的博客
07-15 3438
解决el-select回显异常 显示option选项的value 而不是显示label_"下拉框设置value-key没用 :value=\"{ optionid: item.id, op_JasonHPC的博客-CSDN博客el-select ——el-option中 value、 label的显示问题_el-option回显示其它值_).(的博客-CSDN博客。
Element UI下拉列表el-option中的key、value、label含义
CLAY_Z的博客
05-11 7441
相当于身份令牌，唯一的令牌，防止出错。这个key没有也行，但是保险起见最好加上。因为这个key作为 value 唯一标识的键名，绑定值为对象类型时必填。这是给用户看的，当点击下拉菜单时，会出来选项，用户看到的选项就是这个这是你点击某个label(option)之后，将对应的值给v-model绑定的值model。
el-option的:value绑定整个对象
weixin_51780751的博客
11-16 1963
这两张图说明：el-option的value是可以绑定对象的，但是要加value-key这个属性。
Element组件（select选择器）
weixin_68915174的博客
11-29 2375
将自定义的HEML模板插入到el-option的slot中
element中el-option控件的value选项绑定对象以及自定义option
热门推荐
weixin_44092905的博客
01-26 1万+
一.绑定对象 有时候选中el-option中某一个选项的时候，不仅要获取到这个item的item_id，还需要使用到item中保存的其他数据，这个时候就需要，将value绑定的值设置为整个item <el-select v-model="value" value-key="item_id" placeholder="请选择"> <el-option v-for="item in options" :key="item.value"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值