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 相关文章推荐
javascript作用域和闭包使用详解
Apr 25 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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 clearstatcache()函数详解
2010/03/02 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
AngularJS快速入门
2015/04/02 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
详解webpack2+React 实例demo
2017/09/11 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
使用python实现BLAST
2018/02/12 Python
django 控制页面跳转的例子
2019/08/06 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
Python datetime 如何处理时区信息
2020/09/02 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
参观接待方案
2014/03/17 职场文书
低碳环保口号
2014/06/12 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
军训个人总结
2015/03/03 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
python中pycryto实现数据加密
2022/04/29 Python