element-ui 关于获取select 的label值方法


Posted in Javascript onAugust 24, 2018

在某些场景下,还是需要在获得label的值跟Value值的。

vue获取值的方式:

<el-form-item label="库位" prop="goodsLocationId" >
                <el-col :span="15">
                  <el-select v-model="scope.row.goodsLocationId" placeholder="货位地址" @change="changeLocationValue">
                   <el-option v-for="lo in locations" :label="lo.locationName" :value="lo.id" :key="lo.id"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>

js:

changeLocationValue(val){
      //locations是v-for里面的也是datas里面的值
      let obj = {};
      obj = this.locations.find((item)=>{
        return item.id === val;
      });
      this.wareHouseVO2.goodsLocationName = obj.locationName;
    },

这可以获得相应的值减少其他数据库的操作。

拓展知识:Element ui select同时获取value和label的值的实例

如下所示:

<el-form-item v-if="isMD" label="业务员名称">
       <el-select v-model="addBM.storeManagerName" @change="selectGet" filterable style="display:block;" placeholder="请选择门店业务员名称">
        <el-option
         v-for="item in userList"
         :key="item.id"
         :label="item.name"
         :value="item.id">
        </el-option>
       </el-select>
     </el-form-item>
//下拉框选中事件
  selectGet(vId){//这个vId也就是value值
   console.log(ha);
   let obj = {};
   obj = this.userList.find((item)=>{//这里的userList就是上面遍历的数据源
     return item.id === vId;//筛选出匹配数据
   });
   console.log(obj.name);//我这边的name就是对应label的
  }

以上这篇element-ui 关于获取select 的label值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js定时器的使用(实例讲解)
Jan 06 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
小程序实现单选多选功能
Nov 04 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
微信小程序用户信息encryptedData详解
Aug 24 #Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 #Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 #Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 #Javascript
element-ui 表格数据时间格式化的方法
Aug 24 #Javascript
vue select选择框数据变化监听方法
Aug 24 #Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 #Javascript
You might like
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
基于python指定包的安装路径方法
2018/10/27 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Django框架 信号调度原理解析
2019/09/04 Python
python 装饰器的使用示例
2020/10/10 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
化学教学随笔感言
2014/02/19 职场文书
白莲教口号
2014/06/18 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
交通事故协议书范文
2014/10/23 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android