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之ajax技术的详细介绍
Jun 19 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 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桌面中心(四) 数据显示
2007/03/11 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python实现网页自动签到功能
2019/01/21 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
天网面试题
2013/04/07 面试题
实习教师个人的自我评价
2013/11/08 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
python中filter,map,reduce的作用
2022/06/10 Python