elementUI的el-select传递item对象或其他参数的2种方法

方法1 :value=“item” 绑定对象

只要:value绑定item对象就可以
在这里插入图片描述
value-key="value" 必须是item里的一个属性,绑定值为对象类型时必填

 <el-select v-model="value" placeholder="请选择" value-key="value" @change="changeSelect"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item"></el-option>
</el-select>
 			data() {return {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: ''}},methods: {changeSelect(val) {console.log(val);// item对象}}

方法2 用find找到选中数据的item

有时候v-modal绑定的是表格的scope.row属性,以及可能会被其他因素影响。用:value="item"可能会出问题,这种情况就比较适合用find了,把选中值和数据列表做对比,找出选中的那个item

<template><el-select v-model="selectedValue" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>
export default {data() {return {selectedValue: null,options: [{ label: '选项1', value: 'option1', additionalData: '数据1' },{ label: '选项2', value: 'option2', additionalData: '数据2' },// ...更多选项]};},// 可以用watch监听,也可以用@changewatch: {selectedValue(newValue) {const selectedItem = this.options.find(item => item.value === newValue);console.log(selectedItem); // 包含所有数据的选中项}}
};
</script>

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

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

相关文章

Qt/QML编程之路:qml通过C++传递变量给另一个qml(42)

Qml的项目设计时,不可避免涉及到qml之间的调用,此时很正常想象到的是如何进行事件传输和参数传输。一般就是在qml文件中定义property int, 或者定义 signal mySignal。 我就遇到了这么一种情况,需要把一个image的source,也就是图片的路径信息,从设置界面直接传递到要设置背…

[EFI]戴尔T5810电脑 Hackintosh 黑苹果efi引导文件

硬件型号驱动情况主板 戴尔T5810&#xff0c;C610/612芯片 处理器英特尔至强E5-2620 v3已驱动内存12 GB已驱动硬盘500GB WD Blue Solid State Drive & 2TB Seagate Mobile Hard Drive (Upgraded)已驱动显卡RX 570 4Gb已驱动声卡瑞昱 Realtek ALC662 英特尔 High Definitio…

(蓝桥杯每日一题)求最长回文串

问题描述 给出一个长度为 n 的小写字符串&#xff0c;求一个最长的子串 S&#xff0c;满足SXY,X&#xff0c;Y>1&#xff0c;且X,Y 均为回文串。 输入格式 输入包括一行: 第一行是一个长度为 n 的小写字符串。 输出格式 输出包括一行&#xff1a; 一行一个整数&#xff0c;表…

Uboot中ARMV7和ARMV8 MMU配置

问题概述 Uboot中如果打开MMU&#xff0c;则MMU需要配置MMU table来管理不同的地址空间。 其中ARMV7和ARMV8中这部分的配置代码是不同。 ARMV7的配置过程 代码参考&#xff1a;u-boot-2020.04/arch/arm/lib/cache-cp15.c mmu_setup →set_section_dcache →dram_bank_mmu_…

【GPU驱动开发】-Mesa ST和GLSL编译器衔接交互分析

前言 不必害怕未知&#xff0c;无需恐惧犯错&#xff0c;做一个Creator&#xff01; &#xff08;基于Mesa 22.2.5版本&#xff09; Mesa State Tracker 与 GLSL 编译器的协同工作是 Mesa 3D 图形渲染管线中的关键环节。这两者的衔接确保了 OpenGL API 调用能够正确、高效地…

Shell脚本转发activemg topic消息到另个activemg服务器

如果你想通过Shell脚本将ActiveMQ中的Topic消息从一个服务器转发到另一个服务器&#xff0c;你可以使用stomp命令行工具来实现。 以下是一个示例脚本&#xff0c;演示如何使用Shell脚本将ActiveMQ中的Topic消息从一个服务器转发到另一个服务器&#xff1a; #!/bin/bash# 源Act…

【论文阅读】Membership Inference Attacks Against Machine Learning Models

基于confidence vector的MIA Machine Learning as a Service简单介绍什么是Membership Inference Attacks&#xff08;MIA&#xff09;攻击实现过程DatasetShadow trainingTrain attack model Machine Learning as a Service简单介绍 机器学习即服务&#xff08;Machine Learn…

Material Components for Android助你打造精美App

Material Components for Android助你打造精美App 简介 Material Components for Android (MDC-Android) 是帮助开发者执行 Material Design 的工具。由谷歌的核心工程师和用户体验设计师团队开发&#xff0c;这些组件使得开发者可以可靠地开发工作流来构建美观且功能齐全的 …

Spring Security 的TokenStore三种实现方式

博主介绍&#xff1a;✌专注于前后端领域开发的优质创作者、秉着互联网精神开源贡献精神&#xff0c;答疑解惑、坚持优质作品共享。本人是掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战&#xff0c;深受全网粉丝喜爱与支持✌有需要可以联系作者我哦&…

期权定价模型系列[9]SABR模型

1.简介 SABR模型是由 Hagan在 2002年提出的一种随机波动率模型&#xff0c;在抛弃了原始的BSM 模型中对于波动率为某一常数的假定&#xff0c;假设隐含波动率同样是符合几何布朗运动的&#xff0c;并且将隐含波动率设定为标的价格和合约行权价的函数&#xff0c;结合了隐含波动…

12.5内存操作流(血干JAVA系列)

12.5内存操作流 12.5内存操作流ByteArraylnputStream类的主要方法ByteArrayOutputStream 类的主要方法【例12.33】使用内存操作流完成一个大写字母转换为小写字母的程序 12.5内存操作流 在 流 的 操 作 中 除 了 进 行 文 件 的 输 入 与 输 出 操 作 之 外 &#xff0c; 也 可…

flask初体验

1、定义 Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务。 中文官网 2、初步上手 1、安装flask pip3 install flask 2、创建flask应用 # -*- coding = utf-8 -*- # @Time : 2024/1/28 23:02 # @Author: Frank # @File: main.py…

说说你对vue的mixin的理解,有什么应用场景

mixin是什么 Vue中的mixin 局部混入全局混入注意事项: 使用场景源码分析Vue 的几种类型的合并策略 替换型合并型队列性叠加型小结 此文章&#xff0c;来源于印客学院的资料&#xff0c;这里只是分享&#xff0c;便于查漏补缺。 mixin是什么 Mixin 是 面向对象程序设计语言中…

回归预测 | MATLAB实现PSO-GRNN粒子群优化广义回归神经网络多输入单输出预测(含优化前后预测可视化)

回归预测 | MATLAB实现PSO-GRNN粒子群优化广义回归神经网络多输入单输出预测 目录 回归预测 | MATLAB实现PSO-GRNN粒子群优化广义回归神经网络多输入单输出预测预测效果基本介绍程序设计参考资料预测效果 <

系统架构设计师-21年-上午试题

系统架构设计师-21年-上午试题 更多软考资料 https://ruankao.blog.csdn.net/ 1 ~ 10 1 前趋图(Precedence Graph)是一个有向无环图&#xff0c;记为:→{(Pi,Pj)|Pi must complete before Pj may strat}&#xff0c;假设系统中进程P{P1&#xff0c;P2&#xff0c;P3&#xf…

爬虫基础-计算机网络协议

一个数据的传输 这些设备的数据转发是通过协议来完成的&#xff0c;整个互联网可以说是完全由网络协议来维持的 不同的协议分工不同&#xff0c;比如ip协议确保了ip寻址&#xff0c;tcp协议确保了数据完整性 IP地址和URL ip地址 整个网络传输可以比作快递&#xff0c;数据就…

使用毫米波雷达传感器的功能安全兼容系统设计指南1(TI文档)

摘要 功能安全标准规定了在系统中实施安全的要求&#xff0c;并有助于概括该系统要达到的安全目标。包括功能安全的系统设计不仅要降低操作不当的风险&#xff0c;还要检测故障并将其影响降到最低。随着汽车和工业系统的自主性越来越强&#xff0c;严格的功能安全要求被强制执行…

单板计算机(SBC)-片上系统(SOC)嵌入式C++和FPGA(VHDL)

要点&#xff1a; 片上系统/单板计算机嵌入式C及VHDL编程单板计算机(Raspberry Pi)C实现MQTT监控房间门锁&#xff0c;灯光&#xff0c;并使用RESTful提示状态单板计算机(ESP8266)C 无线网络 MQTT土壤湿度监测仪&#xff0c;实现HTTP服务器&#xff0c;创建网页版监控界面&…

手把手带你死磕ORBSLAM3源代码(六十二) Atlas.cc GetAtlasKeyframes

目录 一.前言 二.代码 2.1完整代码 一.前言 以下是对每个函数的详细解释: SetKeyFrameDababase(KeyFrameDatabase pKFDB)* 功能:设置Atlas对象的关键帧数据库。参数:pKFDB是一个指向KeyFrameDatabase的指针。实现:将成员变量mpKeyFrameDB设置为传入的pKFDB。GetKeyFram…

(28)Linux 信号保存 信号处理 不可重入函数

首先介绍几个新的概念&#xff1a; 信号递达(Delivery)&#xff1a;实际执行信号的处理动作。信号未决(Pending)&#xff1a;信号从产生到递达之间的状态。信号阻塞(Block)&#xff1a;被阻塞的信号产生时将保持在未决状态&#xff0c;直达解除对该信号的阻塞&#xff0c;才执…