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获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
js中split和replace的用法实例
Feb 28 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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 获取mysql数据库信息代码
2009/03/12 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
详解Vue之事件处理
2020/07/10 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
python中lambda与def用法对比实例分析
2015/04/30 Python
python多线程方式执行多个bat代码
2016/06/07 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
公司委托书格式范文
2014/04/04 职场文书
青年志愿者活动总结
2014/04/26 职场文书
商铺门前三包责任书
2014/07/25 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android