获取 el-select 的 value 和 label 值  

在 Element UI 的 el-select 组件中,可以通过以下方法获取选项的 value 和 label 值。

1、绑定 v-model 获取 value

el-select 通常通过 v-model 绑定 value 值,直接访问绑定的变量即可获取当前选中的 value。

 <el-selectv-model="company"@change="companyChange"clearablefilterablereserve-keywordstyle="width: 300px"><el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"> </el-option></el-select>

通过 change 事件获取 label


const list = ref([ { id: '1', name: '选项1' },{ id: '2', name: '选项2' }
])const companyChange=(value:string)=> {console.log(value); // 输出当前选中的 valuevar name = list.value.filter(item=>ite.id === value)[0].name //  输出当前选中的label}

select 初始化

const initSelect=()=>{// id 为需要选中的选项idcompany.value = id
}

2、使用 value-key 获取整个对象

如果选项数据是对象而非简单值,可以设置 value-key 绑定整个对象。

  <el-selectv-model="company"clearablefilterable@change="changeCompany"style="width: 300px"><el-option v-for="item in mTenantList" :key="item.tenantId" :label="item.enterpriseName" :value="{value:item.tenantId,label:item.enterpriseName}"> </el-option> </el-select>


const list = ref([ { id: '1', name: '选项1' },{ id: '2', name: '选项2' }
])const companyChange=(value:string,label:string)=> {console.log(value); // 输出当前选中的 valueconsole.log(label); // 输出当前选中的 value}

这里发现初始化问题!无法设置selelct 选中!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/85325.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/85325.shtml
英文地址,请注明出处:http://en.pswp.cn/pingmian/85325.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树莓派与嵌入式系统实验报告

一、Linux 系统编译工具链实践&#xff1a;mininim 源码编译 虚拟机 Ubuntu 编译流程 环境配置问题 编译时遇到虚拟机无法联网的情况&#xff0c;通过连接个人热点解决&#xff08;校园网限制导致无法访问外部资源&#xff09;。 执行 ./bootstrap 时报错 gnulib-tool: command…

IDEA部署redis测试

新建springboot&#xff0c;项目改为&#xff1a;testredis E:\ideaproject\testredis\src\main\java\org\example\testredis\TestredisApplication.java 代码为&#xff1a; package org.example.testredis;import org.springframework.boot.SpringApplication; import org.…

旅游服务礼仪实训室:从历史演进到未来创新的实践探索

一、旅游服务礼仪实训室的历史演进&#xff1a;从礼制规范到职业化培养 旅游服务礼仪实训室的建设并非一蹴而就&#xff0c;其发展历程与人类对礼仪认知的深化及职业教育体系的完善密切相关。 1. 古代礼仪教育的萌芽 礼仪作为社会行为规范&#xff0c;最早可追溯至中国夏商周…

Could not find a declaration file for module ‘..XX‘.

1. 添加 Vue 声明文件 如果您还没有为 .vue 文件创建类型声明&#xff0c;可以通过创建一个新的类型声明文件来解决该问题。 步骤&#xff1a; 在您的项目根目录下创建一个名为 shims-vue.d.ts 的文件&#xff08;您可以选择其他名称&#xff0c;但建议使用常见名称以便于识…

OpenCV CUDA模块设备层-----反正切(arctangent)函数atan()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 对输入的 uchar1 像素值&#xff08;范围 [0, 255]&#xff09;&#xff0c;先归一化到 [0.0, 1.0] 浮点区间&#xff0c;然后计算其反正切值 at…

java中常见的排序算法设计介绍

排序算法 复杂度原地排序冒泡排序算法逻辑时间复杂度&#xff1a;最好O(n)&#xff0c;最坏和平均O(n^2)冒泡排序:稳定性算法 选择排序算法逻辑时间复杂度&#xff1a;最好&#xff0c;最坏和平均都是O(n^2)选择排序:不稳定性算法 插入排序算法逻辑时间复杂度&#xff1a;最好O…

深度学习系列81:MCP快速上手

MCP 是一种开放协议&#xff0c;通过标准化的服务器实现&#xff0c;使 AI 模型能够安全地与本地和远程资源进行交互。MCP 可帮助你在 LLM 之上构建智能代理和复杂的工作流。MCP 采用客户端-服务器架构&#xff0c;主机应用程序可以连接到多个服务器。 这里用个demo展示一下如何…

【Python机器学习(一)】NumPy/Pandas手搓决策树+使用Graphviz可视化(以西瓜书数据集为例)

下题来源于笔者学校的《模式识别与机器学习》课程的作业题,本文将通过使用NumPy处理数学运算,Pandas处理数据集,Graphviz实现决策树可视化等Python库来实现决策树算法及其格式化。 导入用到的Python库: import numpy as np import pandas as pd from graphviz import Digr…

react-activation 组件级缓存解决方案

文章目录 一、KeepAlive 组件二、AliveScope 容器三、useAliveController Hook四、生命周期五、完整示例 react-activation 主要解决 React 项目中的「页面缓存」需求(是第三方库&#xff0c;非React 官方)&#xff0c;类似于 Vue 中的 <KeepAlive>&#xff1a; 功能说明…

CentOS 7内核升级方案

关于升级 CentOS 7 系统内核至 4.19 版本的可执行升级方案,可根据实际情况进行调整和完善,希望能对大家有所帮助: 一、升级背景与目的 随着业务的发展和系统稳定性的要求,当前 CentOS 7 系统所使用的内核版本 3.10.0-1160.el7.x86_64 已经无法满足部分新功能需求以及面临…

树莓派实验实践记录与技术分析

一、内核驱动开发&#xff1a;hello 模块实现 驱动程序代码 #include <linux/init.h> #include <linux/module.h> static int __init hello_init(void) { printk(KERN_INFO "hello kernel\n"); return 0; } module_init(hello_init); static void …

【秦九绍算法】小红的 gcd

题目 牛客网&#xff1a;小红的 gcd 题目分析 我们知道&#xff0c;求gcd就用欧几里得算法&#xff08;辗转相除法&#xff09;&#xff1a;gcd(a,b)gcd(b,a mod b)。但是这题的a非常大&#xff0c;最大是一个1e6位数&#xff0c;无法使用任何数据类型存储。如果使用高精度…

AWS服务监控之EC2内存监控

首先在IAM里找到角色&#xff0c;创建角色&#xff0c;选择EC2 然后在被监控的机器上安装cloudwatch-agent 官方链接在本地服务器上安装 CloudWatch 代理 - Amazon CloudWatch wget https://s3.amazonaws.com/amazoncloudwatch-agent/redhat/amd64/latest/amazon-cloudwatch-a…

鸿蒙 ArkWeb 和 H5混编开发

ArkWeb Web 相关标准技术(HTML/CSS/JS)&#xff0c;是业内支持性最广泛的技术&#xff0c;可以在最广泛的平台下实现“一次编写到处运行”&#xff1b;大部分对性能无需极致要求的应用页面&#xff0c;都可以使用 Web 技术来实现。 鸿蒙 ArkWeb Kit&#xff08;方舟 Web&…

设计模式-迪米特法则(Law of Demeter, LoD)

迪米特法则&#xff08;Law of Demeter, LoD&#xff09; 别名&#xff1a;最少知识原则&#xff08;Least Knowledge Principle&#xff09; 核心思想&#xff1a;一个对象应尽可能少地与其他对象发生交互&#xff0c;只与直接的朋友&#xff08;成员变量、方法参数、方法返回…

python获取AB直线间任意一点经纬度

获取AB直线间任意一点经纬度 1、目标 已知A点经纬度,距离;B点经纬度,距离,如果C点在AB之间,且知道C点距离,求C点的经纬度信息。 目标:在AB这条直线上,根据给定的距离(从A点开始沿直线到某点的距离)来求该点的经纬度。 2、方法 首先计算AB的总长度(大圆距离),…

Android实战——系统字体库加载流程

Android 系统字体库指的是在Android设备上用于显示文本的字体集合。随着Android系统的更新,其对字体的支持也日益增强,允许开发者和用户更灵活地定制界面文字显示。 一、字体库介绍 1、字体库文件 字体库文件是指存储字体数据的文件,这些文件包含了创建文本字符所需的所有…

嵌入式乐鑫音频项目“无声”问题深度调试复盘与方法论总结

前言&#xff1a;一场典型的“工程师寻踪之旅” 本次调试始于一个看似简单却极其顽固的问题&#xff1a;在一个基于乐鑫ESP-ADF&#xff08;音频开发框架&#xff09;的DuerOS示例项目中&#xff0c;移植到M5Stack ATOMIC Echo Base硬件上后&#xff0c;程序能够成功编译、烧录…

地下安全防线:电缆通道防外破地钉如何守护城市隐形生命线

在繁华都市的柏油马路之下、在静谧乡村的泥土深处&#xff0c;纵横交错的地下管线如同城市与乡村的 “隐形生命线”&#xff0c;承载着电力输送、供水供气、通信传输等重要功能&#xff0c;默默维系着现代社会的正常运转。然而&#xff0c;这条 “生命线” 正面临着诸多潜在威胁…

linux时间同步方案

yum install chrony -y # 配置 chrony 使用国内服务器 sed -i s/^pool.*pool.ntp.org/#&/ /etc/chrony.conf cat >> /etc/chrony.conf <<EOF server ntp.aliyun.com iburst server ntp.tencent.com iburst server ntp.ntsc.ac.cn iburst server time1.cloud.t…