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代码
Dec 15 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 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 获取文件权限函数介绍
2013/07/11 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
javascript 内存模型实例详解
2020/04/18 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python实现简单遗传算法
2020/09/18 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
2014年五四青年节活动策划书
2014/04/22 职场文书
学校宣传标语
2014/06/18 职场文书
代领毕业证委托书
2014/08/02 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
小学音乐课教学反思
2016/02/18 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
bose降噪耳机音能消除人声吗
2022/04/19 数码科技
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android