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 相关文章推荐
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
javascript prototype 原型链
2009/03/12 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
对python多线程与global变量详解
2018/11/09 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
个性大学生自我评价
2013/12/04 职场文书
领导欢迎词致辞
2015/01/23 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
人生感悟经典句子
2019/08/20 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
React更新渲染原理深入分析
2022/12/24 Javascript