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 操作cookies及正确使用cookies的属性
Oct 15 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
微信小程序用户信息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通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
php实现读取超大文件的方法
2014/07/28 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
javascript 写类方式之九
2009/07/05 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
pandas重新生成索引的方法
2018/11/06 Python
python3 使用traceback定位异常实例
2020/03/09 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
投资意向协议书
2015/01/29 职场文书
永不妥协观后感
2015/06/10 职场文书
人生遥控器观后感
2015/06/11 职场文书
《迟到》教学反思
2016/02/24 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
详解Vue的options
2021/05/15 Vue.js
Ajax异步刷新功能及简单案例
2021/11/20 Javascript