element-ui 关于获取select 的label值方法

在某些场景下,还是需要在获得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值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue.js 获取select中的value实例

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="./vue.js"></script> </head> <

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

  • element-ui中的select下拉列表设置默认值方法

    element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来 那如何修改呢? 上element-ui中的代码片段 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key=&qu

  • element-ui 关于获取select 的label值方法

    在某些场景下,还是需要在获得label的值跟Value值的. vue获取值的方式: <el-form-item label="库位" prop="goodsLocationId" > <el-col :span="15"> <el-select v-model="scope.row.goodsLocationId" placeholder="货位地址" @change=&quo

  • JavaScript获取select中text值的方法

    本文实例讲述了JavaScript获取select中text值的方法.分享给大家供大家参考,具体如下: 别的不说,先看代码: 方法一: <select name="parent_id" onchange="setTitleAndLinkByGoodsCategory(this.value,this.options[this.selectedIndex].text);" > <option value="0">请选择商品分类

  • element ui中表单el-form的label如何设置宽度

    目录 element ui中表单el-form的label设置宽度 在el-form-item 重置label宽度 element ui中表单el-form的label设置宽度 测试要求把输入框前面的名字带括号的把括号部分显示在下一行,可以通过设置前面的label宽度来进行换行. 在具体的el-form-item中设置label-width, 也可以为整个表单el-form设置label-width,这样整个页面的label宽度统一. 例: <el-form label-width="10

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • Django REST Framework序列化外键获取外键的值方法

    需求:序列化外键,获取外键的除id之外的值 使用Django REST Framework虽然开发接口快速,但是如果想要获取到除外键id值之外的外键信息,直接继承serializers.ModelSerializer类,然后在fields中指定返回的字段是获取不到外键的其他值的,比如我现在需要外键的name属性值,下面就给大家介绍两种方法通过序列化外键来获取我们想要的外键的值. 这里有两个Model:问卷(Questionnaire):问题(Question).一张问卷中包含多个问题,问题通过外

  • layui动态渲染生成select的option值方法

    脚本语言:设定默认值:直接拼接,然后根据返回值渲染select // 动态渲染脚本类型下拉框 // 1.发送ajax请求得到data // 2.将data渲染到页面上 function getDataList() { // 请求 $.ajax({ type:'post', url: "/cd/workPlatform/tool/detail", success:function(response){ var data=response.data; $('#scriptLanguage'

  • IE8下Jquery获取select选中的值post到后台报错问题

    我们一般使用jquery获取select时,一般这么用: <select id='a'> <option selected='selected' value='1'> </select> var selectedValue = $("#a").val(); 在非IE8下,selectedValue的值为"1",typeof selectedValue 为"string". 在IE8下,selectedValue

  • javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)

    JavaScript获取Select当前值写法:var value = document.getElementById("select").options[document.getElementById("select").options.selectedIndex].value;var text = document.getElementById("select").options[document.getElementById("s

  • php 获取select下拉列表框的值

    给select 表单无素一个名字. 表单提交后 用 $_POST 或 $_GET 方式提交 $_POST['sel']或者$_GET['sel']获得选中的select的value值 复制代码 代码如下: if( $_POST ) { echo $_POST['select']; } ?> <form name="form1" enctype="multipart/form-data" method="post" action=&qu

  • js获取select标签选中值的两种方式

    复制代码 代码如下: var obj = document.getElementByIdx_x("testSelect"); //定位idvar index = obj.selectedIndex; // 选中索引var text = obj.options[index].text; // 选中文本var value = obj.options[index].value; // 选中值jQuery中获得选中select值第一种方式$('#testSelect option:select

随机推荐