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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
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计算给定时间之前的函数用法实例
2015/04/03 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
js DOM模型操作
2009/12/28 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
商超业务员岗位职责
2014/03/12 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
会计出纳岗位职责
2015/03/31 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
Android Rxjava3 使用场景详解
2022/04/07 Java/Android
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
Tomcat弱口令复现及利用
2022/05/06 Servers