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字符编码函数区别分析
Jun 05 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 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/08/21 PHP
PHP 文件系统详解
2012/09/13 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
巴西宠物商店:Cobasi
2019/04/19 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
小加工厂管理制度
2014/01/21 职场文书
见习报告的格式
2014/10/31 职场文书
红白喜事主持词
2015/07/06 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL