vue基于elementUI下拉Select同时获取value和label的值

最新推荐文章于 2024-06-19 11:20:54 发布
最新推荐文章于 2024-06-19 11:20:54 发布
阅读量1.9w 收藏 40
点赞数 12
分类专栏： Vue vue专栏 文章标签： vue element Select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221334/article/details/97793457
版权
在Vue中使用ElementUI的Select组件时，遇到需要同时获取选中项的id和name。通常只传递id就能后端匹配数据，但某个项目中，架构师要求前端必须传入三个name字段，导致额外的工作量。
摘要由CSDN通过智能技术生成

碰到脑残架构师系列——

Select通过接口获取列表tableData，选择onSelectedDrug 后获取参数：id直接获取 但 name 需要多加个匹配 

<el-form-item label="控制系统" :label-width="formAddLabelWidth" prop="controlSystemName ">
            <el-select  placeholder="请选择" style="width:100%" @change="onSelectedDrug($event)" v-model="addForm.controlSystemName">
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.systemName"      
                :value="item.id"
              ></el-option>
最低0.47元/天 解锁文章
就像风1样
关注
  • 12
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
SortSelect vue + elementui自定义按首字母排序下拉列表组件
10-27
在Vue.js框架中，开发一个自定义的按首字母排序的下拉列表组件是一个常见的需求，特别是当结合ElementUI这样的流行UI库时。ElementUI提供了丰富的组件库，但有时我们需要根据项目需求进行定制，以便更好地满足用户...
elementui下拉框选中，获取选中对象方法，包含label和value
吴冬雪的博客
03-07 2468
el-select 添加value-key=‘id’，value-key作为 value 唯一标识的键名，绑定值为对象类型时必填，el-option的value赋值为item。
Vue.js获取被选择的option的value和text值方法
12-29
如下所示： 1.获取option的value的值，watch option 控件时，或自动获取option的value的值。 2.获取被选中的option的text的值时,使用：$(“#optionID option:selected”).text 拓展知识：select标签如何传递选中option的value值与text值方法 如下所示： <select name=type onchange=show_sub(this.options[this.options.selectedIndex].value)> 请选择主菜名 <o
vue element-ui select下拉搜索以及多选
最新发布
u011857538的博客
06-19 721
vue element-ui select下拉搜索以及多选
vue elementUI el-select 同时获取label 和 value 的值
无人之岛08的博客
11-19 1950
<template> <div> <el-select v-model=“fruit” @change=“handleChange”> <el-option v-for=“item in selectList” :key=“item.whsCode” :label=“item.fruitName” :value=“item.fruitEnName”></el-option> </el-select> </div> </
vue + element + select 获取下拉框的 label 和 value 值（ 例如 绑定的是 id ， 但后台要求即传 id ，又要传 id 对应的 name ）
小白菜的博客
07-20 6099
<template> <div> <el-form :inline="true" :model="form" ref="form" :rules="formRule"> <el-form-item label="标题" prop="titleId"> <el-select v-model="form.titleId" filterable placeholder="请选择标题" @change="changeTit
vue+elementui中，el-select多选下拉列表中，如何同时获取:value和:label的值？
穆雄雄的博客
10-24 2527
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。 项目场景： 正如题目所说，今天在项目过程中遇到了个需求，因为需要在前台展示运动员的名称，但是运动员的编号在别的地方还需要使用，所以想了想，还是将编号和名称一并添加到数据库中，到时候拿的时候也比较方便。就不用在根据编号查询一遍呢了（接口是外部的，重新查的话会影响效率） 使用的技术：element-ui的el-select标签 问题描述： 下面是下拉列表展示的代码： <el-form-item label="人员名称" > ..
vue.js 获取select中的value实例
10-18
在本文中，我们将学习如何在Vue.js框架中获取select下拉列表中的选中值。Vue.js是一种流行的JavaScript框架，用于构建用户界面和单页应用程序。它允许我们使用响应式数据绑定和组件化的视图组件。下面，我们将通过一...
element-ui 关于获取select 的label值方法
10-18
本文将详细讲解如何在Element UI中获取`el-select`组件选中的`label`值，以及如何同时获取`value`和`label`的值。 1. 获取`el-select`的`label`值： 在Element UI中，`el-select`的`v-model`绑定的是选中项的`value...
vue select 获取value和lable操作
10-14
主要介绍了vue select 获取value和lable操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+elementui实现下拉框增加checkbox并可全选或取消（完整案例及效果图）.zip
03-09
`el-option`是下拉框中的每个选项，通过`v-for`循环遍历`options`数据，`label`和`value`分别代表选项的显示文本和值。`el-checkbox`是用于添加到每个选项中的复选框，其`v-model`绑定到每个选项对象的`checked`属性...
vue element el-select 同时获取value和label的值
咖啡程序员
04-01 836
vue element el-select 同时获取value和label的值 在工作中有些场景可能会需要同时获取value和label的值 <el-form-item> <el-select v-model="shutId" @change="handleChange" filterable placeholder="请选择关卡" > <el-o
vue elementui中，el-select多选下拉列表中，获取:value和:label的值
qq_37916164的博客
12-01 2875
<el-form-item label="加工工艺："> <el-select placeholder="请选择加工工艺" multiple style="width:100%" v-model="queryParams.craftId" size="mini" @change="processingTechnicSelect"> <el-.
【Vue+elementUI】el-select 同时获取value和label方法
webFrontEndDev的博客
03-18 1371
<el-select v-model="distributionForm.userId" placeholder="请选择子帐户"> <el-option v-for="item in subAccount" :label="item.realName" :key="item.id" :value="item.id"></el-option> </...
vue---el-select同时获取label和value值
maidu_xbd的博客
05-13 5178
问题描述：同时获取下拉选项的label和value值 解决方法： 方法一 selectChange(val) { var obj = {}; obj = this.options.find(function(item) { return item.value === val; }); console.log("label为", obj.label, "value为", val); }, 方法二 <e
vue基于element-ui select下拉框获取value和label的值(可获取item中任意的值)
前端打工人的博客
12-24 2836
<el-form-item label="物流公司：" prop="courierCompany"> <el-select v-model="id" @change="onChange" placeholder="请选择"> <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"> </el-option>
elementui获取select选中值
09-19
在 element-ui 中使用 select 组件时，可以使用 v-model 指令来获取选中值。 例如： ```html <template> <el-select v-model="selectedValue"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> <script> export default { data() { return { selectedValue: '', options: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }, ] } } } </script> ``` 在上面的例子中，`selectedValue` 就是选中值。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值