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添加String.Format方法
Aug 11 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
javascript打印输出json实例
2013/11/11 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
Python引用模块和查找模块路径
2016/03/17 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
HTML5 Web 存储详解
2016/09/16 HTML / CSS
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
百日安全活动总结
2014/05/04 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
个人投资合作协议书
2014/10/12 职场文书
服务员岗位职责
2015/02/03 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
PO模式在selenium自动化测试框架的优势
2022/03/20 Python