elementUI select组件value值注意事项详解


Posted in Javascript onMay 29, 2019

select组件的使用方式就不细说,可查看select组件使用方式

主要要说一下注意事项:

select组件可以动态生成option选项,option选项绑定对应的文本值和value值。

有时候我们发现 默认显示的内容会显示具体的value值而不是对应的文本,这种情况原因都是:

v-model绑定的值与option选项value值类型不符,

常规就是number与string

通用我们会循环一个数组、对象生成option选项

1.简单数组

const array1=[1,2,3]

<el-select v-model="seletValue">
  <el-option v-for="item in array1" :key="item" :value="item" :label="item">
  </el-option>
</el-select>

此时 option 的value 是number 类型,v-model绑定的seletValue也必须是number类型

2.对象数组

const arrayOptions=[{key:0,text:'a'},{key:0,text:'b'},{key:0,text:'c'}}]

<el-select v-model="seletValue">
 <el-option v-for="item in arrayOptions" :key="item.key" :value="item.key" :label="item.text">
 </el-option>
</el-select>

因为我们用item.key作为option的value,item.key 是json中的值,

此时 option的value是number类型,v-model绑定的seletValue也必须是number类型 例如 seletValue=1

3.对象

const options={0:'a',1:'b',2:'c',}

<el-select v-model="seletValue">
 <el-option v-for="(value,key) in options" :key="key" :value="key" :label="item.value">
 </el-option>
</el-select>

因为在json对象的 键:值 结构中,键的都是string类型,这里我们把json的键作为 option的value,

此时 option的value其实是string 类型,v-model绑定的seletValue也必须是string类型 例如 seletValue='1'

如果提交接口的数据要求是number怎么办,只需要在提交数据之前转换下Number(seletValue)就可以了

遇到这种情况可以参照上述情况检查代码调试

elementUI select组件value值注意事项详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
elementUI select组件使用及注意事项详解
May 29 #Javascript
通过vue手动封装on、emit、off的代码详解
May 29 #Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 #Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 #Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 #Javascript
vue-cli3中vue.config.js配置教程详解
May 29 #Javascript
详解vue-cli3开发Chrome插件实践
May 29 #Javascript
You might like
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
深入解析php中的foreach函数
2013/08/31 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
讲解Python中的标识运算符
2015/05/14 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
中药学专业毕业生推荐信
2014/07/10 职场文书
教师演讲稿开场白
2014/08/25 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
2014年人事部工作总结
2014/12/03 职场文书
初中成绩单评语
2014/12/29 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
sql server 累计求和实现代码
2022/02/28 SQL Server