element Select组件非循环匹配方式实现同时拿到value和label的值

最新推荐文章于 2023-08-14 16:43:05 发布
最新推荐文章于 2023-08-14 16:43:05 发布
阅读量262 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43569862/article/details/114069595
版权
博客介绍了如何在不使用循环匹配的情况下，通过点击事件获取Element Select组件中value和label的值，核心是利用组件内部的选项循环和click.native监听。
摘要由CSDN通过智能技术生成 
 后台希望我能同时传输value和label的值   可以帮助后台少一层检索  
 百度后大多数方案都是循环匹配，个人感觉并不是最佳方案，思考后进行优化
 代码如下

<template>
  <div id="app">
    <div id="nav">
        <!-- <HelloWorld></HelloWorld> -->
        <el-select v-model="value" placeholder="请选择价格类别" class="dioLogInputStyle">
              <el
最低0.47元/天 解锁文章
蔚蓝Cure
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI ===＞ select 同时获取 value 和 label 的值
普罗旺斯
10-10 221
<el-col :sm="12"> <el-form-item label="应用类型:" prop="dictDataName"> <el-select v-model="form.dictDataName" class="ele-block" @change="appTypeChange" placeholder="请选择应用类型"> <el-option v-for="item in ap
vue+elementUI中使用v-for循环出多个select下拉框，默认绑定，但改变一个下拉框，其余下拉框也会改变的问题
as965874的博客
12-18 1万+
vue+elementUI中使用v-for循环出多个select下拉框，默认绑定，但改变一个下拉框，其余下拉框也会改变的问题 样式如下 <el-table-column label="姓名" prop="username"> <template slot-scope='scope'> <el-select v-model='scope.row.type'&gt...
多个el-select循环重复的输入框禁用
eleanor_wong的博客
05-11 223
【代码】多个el-select循环重复的输入框禁用。
Vue for循环遍历多个select下拉框，解决选择某个el-option下拉框的内容，所有的el-select值全部都跟着改变
最新发布
懒虫的博客
08-14 2489
3、选中一条二级原因后，el-option列表其他二级原因不可选，选择一条三级原因后，el-option列表其他三级原因不可选，二级原因列表其他项可进行选择，支持模糊搜索（通过filterable属性实现），支出多选（通过multiple属性实现）。allSelectSecondList:[],//所有选中的第二原因列表数据,清空用到。allSelectThirdList:[],//所有选中的第三原因列表数据,清空用到。1、一级原因每行只有一条，二级原因有多条，二级原因每一条对应的三级原因有多条。
vue+elementUI使用v-for循环出多个el-select下拉框，多个下拉框不受影响且反显
Billow_lamb的博客
12-11 9687
vue+elementUI使用v-for拿到循环出多个el-select下拉框，且多个下拉框不受影响 <template> <div> <div v-for="(item, index) in from" :key="item.label"> <span>{{ item.label }}</span> <!-- arr[index] 每一个值的绑定@change="(val) => chageValu
element-ui 关于获取select 的label值方法
10-18
本文将详细讲解如何在Element UI中获取`el-select`组件选中的`label`值，以及如何同时获取`value`和`label`的值。 1. 获取`el-select`的`label`值： 在Element UI中，`el-select`的`v-model`绑定的是选中项的`value...
elementUI select组件value值注意事项详解
10-16
首先，`select`组件用于动态生成`option`选项，每个`option`都有其对应的文本值（`label`）和值（`value`）。当用户选择一个`option`时，`select`组件的`v-model`绑定值会更新为所选`option`的`value`值。因此，理解...
element-ui中select组件绑定值改变,触发change事件方法
10-18
总之，Element UI的select组件提供了方便的方式来实现数据选择，并可以通过v-model与@change指令来实现数据的双向绑定和事件的监听处理。在实际应用中，确保数据和事件处理逻辑的正确性是非常关键的。希望本文的讲解...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
12-13
在项目中发现使用el-select时写的比较多重复代码，还有就是同一个页面使用el-select会出现label值会显示value值， el-select组件化： <el-select :class="obj&&keyword[keywordAttr.label]? 'selected': ''" ...
el-select,el-option下拉选择框
qq_59076775的博客
07-04 7097
下拉菜单的使用
【vue 项目】element-select选择器 以省市下拉框联动为例 通过value获取label的值 将value和label都传给后端
Aohanzzz的博客
09-08 1954
element-select选择器 以省市下拉框联动为例 通过value获取label的值 将value和label都传给后端
2020.9.28-关于vue下拉框＜el-option＞的两种写法（入门）
weixin_44281416的博客
09-28 2968
第一种写法 <el-select> <el-option value="0" label="2019"></el-option> <el-option value="1" label="2020"></el-option> </el-select> 第二种写法 <el-selcct> <el-option v-model="item in nodeOptions" :value="item.value" :lab
解决element下拉框通过循环赋值后下拉框值无法选中
红烧咸咸鱼
09-16 608
直接上代码 <el-select v-model="value" placeholder="请选择" @change="change()"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> 解决办法 ----------- 为下拉框添加一个change事件
关于 VUE的select 初始值设置问题
weixin_33843409的博客
01-02 2660
2019独角兽企业重金招聘Python工程师标准>>> ...
ElementUi 使用 el-select 表单 el-option v-for 循环使用数字值 验证你不通过的注意事项
05-16 1万+
说真的 ELEMENT-UI真的时很强大的 UI库 但是使用的时候 验证的部分的坑还是挺多的, 官方文档 说的又不详细 我遇到的这个问题 希望能够帮助大家 一,首先要保证 model 使用的对象 和你需要验证的对象 的关联关系 二,其次要保证 rules 的属性 和你想要验证的 prop 也是父子关系 三 如果你的你的选择框时 v-for 循环 并且使用数字型ID 你要保...
循环遍历的el-select，实现el-option对应选中，获取每个下拉框选中的内容
热门推荐
wusq的博客
10-08 2万+
el-select下拉框的个数是根据后台数据动态生成的，所以el-select只写了一个，所有的v-model也只有一个，而且el-option的选项都是相同的，这样就会有一个问题，当选择其中一个下拉框时，其他的下拉框也会被选中同样的数据。 首先想到的办法就是能不能让每个下拉框的v-model变得不一样，也就是说能不能让v-model绑定的数据变成动态的？ 我也就是按照这个思路做的 运...
Vue element-UI el-select循环选中问题
weixin_43092301的博客
06-18 2969
Vue element-UI el-select循环选中问题 由于使用el-checkbox-group多选框循环包围着同一个下拉框，导致下拉框选中后无法正常回显 @change="$forceUpdate()" 这里使用了$forceUpdate()，使其强制更新视图，下面是我的源码 <el-checkbox-group v-for="(item,index) in getMonitorAdd" :key='index' v-model="item.userId" > <el-ch
【Vue.$set】 遍历出来的el-select可以实现对el-option对应的选中
zhumizhumi的博客
01-10 1万+
一、效果图以及效果：选中其中一行，其他行不会被选中，不会收影响 二：代码： <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%> <el-table-column prop="files" label="文件名称"></el-...
vue elment的select组件，实现可选择也可输入，不需要鼠标点击也不需要敲回车，可循环实现
女神的博客
08-31 2385
https://element-plus.gitee.io/#/zh-CN/component/select 先来看官网里面的组件 可创建条目的 <template> <el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择文章标签"> <el-option v-.
element select 选中value label
04-01
Element Select 是一个表单元素，它允许用户从预定义的选项列表中选择一个值。选中的值通常是一个字符串，但也可以是一个数字或其他类型的值。在 Element Select 中，可以使用 value 属性来访问选中的值，使用 label 属性来访问选中的选项的标签文本。 例如，一个 Element Select 元素可能包含以下 HTML 代码： ``` <select> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select> ``` 在此示例中，如果用户选择了“香蕉”，则可以使用以下 JavaScript 代码来访问选中的值和标签文本： ``` const selectElement = document.querySelector('select'); const selectedValue = selectElement.value; // "banana" const selectedLabel = selectElement.options[selectElement.selectedIndex].text; // "香蕉" ``` 注意，selectedLabel 变量的值是通过访问 options 数组中的选中选项的 text 属性获得的。selectedIndex 属性指示当前选中的选项的索引。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值