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 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
Javascript的比较汇总
Jul 25 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
js模拟实现百度搜索
Jun 28 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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生成静态页
2006/11/25 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP中常用的转义函数
2014/02/28 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python字符串对其居中显示的方法
2015/07/11 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
Python 高效编程技巧分享
2020/09/10 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
校园安全教育广播稿
2014/02/17 职场文书
小学评语大全
2014/04/22 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
个人党性分析总结
2015/03/05 职场文书
学校会议通知范文
2015/04/15 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
大学生入党自传2015
2015/06/26 职场文书
2015年卫生局工作总结
2015/07/24 职场文书