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 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
jquery事件与绑定事件
Mar 16 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
js静态作用域的功能。
2006/12/25 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
好邻里事迹材料
2014/01/16 职场文书
班主任工作经验材料
2014/02/02 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
化验室岗位职责
2015/02/14 职场文书
关于观后感的作文
2015/06/18 职场文书