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 相关文章推荐
arguments对象
Nov 20 Javascript
js的闭包的一个示例说明
Nov 18 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
React优化子组件render的使用
May 12 Javascript
Javascript Worker子线程代码实例
Feb 20 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自动适应范围的分页代码
2008/08/05 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
总结js函数相关知识点
2018/02/27 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
学校后勤人员职责
2013/12/27 职场文书
经典毕业生求职信
2014/07/12 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
工作年限证明模板
2014/11/01 职场文书
2014年客房部工作总结
2014/11/22 职场文书
2014年法务工作总结
2014/12/11 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
村官2015年度工作总结
2015/10/14 职场文书