首页 > 其他分享 >4-7-vue框架-第三方ui组件elementui-el-select组件change事件获取label的值

4-7-vue框架-第三方ui组件elementui-el-select组件change事件获取label的值

时间:2023-07-20 18:55:57浏览次数:41  
标签:el vue value label change 组件 select

Element的el-select组件change事件获取label的值

在如下el-select组件的代码中,要想在change事件时获取label的值。

<el-select
  v-model="ruleForm.usualReviews"
  :readonly="true"
  class="oms-select"
  placeholder="请选择常用意见"
  @change="selectChanged"
>
  <el-option v-for="item in list"
    :key="item"
    :value="item.opinionId"
    :label="item.content"
  ></el-option>
</el-select>

方法1:修改:value的值

我们可以修改:value的值为"{value:item.opinionId,label:item.content}"。

<el-select
  v-model="ruleForm.usualReviews"
  :readonly="true"
  class="oms-select"
  placeholder="请选择常用意见"
  @change="selectChanged"
>
  <el-option v-for="item in list"
    :key="item"
    :value="{value:item.opinionId,label:item.content}"
    :label="item.content"
  ></el-option>
</el-select>

再选择下拉框,触发selectChanged函数,则可以获取到label的值。

selectChanged(params){
  const { value, label } = params
  this.ruleForm.processReview = label
}

方法2:遍历

Element UI - el-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.id);
  console.log(obj.name); // 这边的name就是对应label
}

标签:el,vue,value,label,change,组件,select
From: https://www.cnblogs.com/andy0816/p/17569380.html

相关文章

  • poi导出excel加水印,单元格可修改 java 下载生成Excel文件添加水印
    poi导出excel加水印,单元格可修改java下载生成Excel文件添加水印原文链接:https://blog.csdn.net/weixin_40077255/article/details/112848376目录poi导出excel加水印,单元格可修改(只支持XSSFWorkbook)引入的jar包:操作水印的工具类:最终效果 小提示poi导出excel加水印......
  • vue3 登录添加图形验证码
    1.新增组件IdentifyCode.vue,使用canvas绘制验证码内容:<template><divclass="s-canvas"@click="refreshCode"><canvasid="s-canvas":width="contentWidth":height="contentHeight"......
  • Hello world
    Helloworld!编写代码publicclassHello{publicstaticvoidmain(String[]args){System.out.print("Hello,World!");}}编译javacjava文件,生成class文件运行class文件,javaclass文件......
  • ile "D:\Development\Python\Python39\Scripts\pip3.exe\__main__.py", line 4,
    Python中的pip命令及其用法在Python中,pip是一个非常重要的工具,它是PythonPackageIndex(简称PyPI)上的软件包管理系统。通过使用pip,我们可以方便地安装、升级和卸载Python的第三方库。安装pip在大多数情况下,新版本的Python已经预装了pip。然而,如果你的Python没有安装pip,你可以通......
  • hive sink 不支持changelog
    HiveSink不支持Changelog在使用Hive作为数据存储和分析的工具时,我们可能会遇到一些限制和不支持的功能。其中一个限制是HiveSink不支持Changelog。本文将介绍什么是HiveSink和Changelog,并提供代码示例来详细说明这个限制。HiveSinkHiveSink是ApacheKafkaConnect的一个......
  • C# 将一个list集合部分字段加入另一个集合 Select使用
    SubmitUserInfoRequestDtoresponseDto=newSubmitUserInfoRequestDto(){id=item.NodeId,name=item.NodeName};varuserList=SMZX_ApprovalMember.GetList(item.N......
  • Vue+springboot集成PageOffice实现在线编辑Word、excel文档
    说明:PageOffice是一款在线的office编辑软件,帮助Web应用系统或Web网站实现用户在线编辑Word、Excel、PowerPoint文档。可以完美实现在线公文流转,领导批阅,盖章。可以给文件添加水印,在线安全预览防止用户下载和复制文件等一、环境要求前端Vue项目:Node.js10及以上版本(当前集成方式......
  • Vue项目常见问题处理
    开发环境推荐使用node14版本,可以尽可能的减少版本兼容导致的问题。安装依赖包报错大部分安装依赖包错误是编译环境不完整引起的(例如:gyp相关错误),请确保编译环境安装完整(以管理员身份运行cmd): npminstall--global--production--verbosewindows-build-toolsnpminstall......
  • Intellij Idea技巧-1
    快捷键下面这个idea和eclipse快捷键的对比,能帮助eclipse的开发者更快适应idea。很多人对idea的不适应都来自快捷键这一层次的基本操作习惯的不适应,只要过了这一关,就进入了投奔idea的快车道。参考:https://www.catalysts.cc/en/wissenswertes/intellij-idea-and-eclipse-shortcuts/另......
  • linux 使用kkFileView组件实现在线文件预览
    kkFileView简介此项目为文件文档在线预览项目解决方案,对标业内付费产品有【永中office】【office365】【idocv】等,在取得公司高层同意后以Apache协议开源出来反哺社区,该项目使用流行的springboot搭建,易上手和部署,基本支持主流办公文档的在线预览,如doc,docx,Excel,pdf,txt,zip,ra......