el-select中自定义 两组el-option,但是key不一样,并且点击需获取当前整个项的所有属性

news2025/5/25 17:06:10

当el-select中只有一组el-option , 获取点击的当前项的属性 , el-select 绑定:value-key='id'

但是 当el-select中有两组el-option ,每组option的key不一致,如下代码所示

<el-select
		v-model="sth"	
		@change="choosee"
		 :value-key="getValueKey(sth)"
	>
	<template >
				<el-option
					v-for="item in FirstGroup"
					:key="item.id"
					:label="item.name"
					:value="item"
				/>
			</template>
	<template >
				<el-option
					v-for="item in SecondGroup"
					:key="item.optionId"
					:label="item.optionlabel"
					:value="item"
				/>
			</template>
</el-select>

对value-key做处理

 const getValueKey = (value) =>{
        if (value?.optionId) return "optionId"; 
        return "id";  // 默认用 id
    }

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

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

相关文章

【笔记】OpenCV的学习(未完)

由于只记关键和不懂的部分 希望做到下次再看这部分笔记就记得 所以用词会非常简练 前向传播 输入数据依次经过模型的各层&#xff0c;按照各层定义的运算规则进行计算&#xff0c;最终得到模型预测输出的过程。 单向的信息流动&#xff0c;不涉及模型参数的更新。 助于思考的…

多模态大语言模型arxiv论文略读(八十七)

MG-LLaVA: Towards Multi-Granularity Visual Instruction Tuning ➡️ 论文标题&#xff1a;MG-LLaVA: Towards Multi-Granularity Visual Instruction Tuning ➡️ 论文作者&#xff1a;Xiangyu Zhao, Xiangtai Li, Haodong Duan, Haian Huang, Yining Li, Kai Chen, Hua Ya…

记录将网站从http升级https

http与https 你知道http是什么吗&#xff0c;那你知道https吗&#xff1f;在进行升级之前我们应该都听说http不安全&#xff0c;要用https&#xff0c;那你知道这是为什么吗&#xff1f; 什么是http&#xff1f; HTTP 是超文本传输协议&#xff0c;也就是HyperText Transfer…

免费PDF工具-PDF24V9.16.0【win7专用版】

【百度】https://pan.baidu.com/s/1H7kvHudG5JTfxHg-eu2grA?pwd8euh 提取码: 8euh 【夸克】https://pan.quark.cn/s/92080b2e1f4c 【123】https://www.123912.com/s/0yvtTd-XAHjv https://creator.pdf24.org/listVersions.php

一周学会Pandas2 Python数据处理与分析-Pandas2数据合并与对比-pd.concat():轴向拼接

锋哥原创的Pandas2 Python数据处理与分析 视频教程&#xff1a; 2025版 Pandas2 Python数据处理与分析 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在数据分析中&#xff0c;数据往往分散在多个来源&#xff08;如不同文件、数据库表或API&#xff09;&#xff0c;需…

安卓原生兼容服务器

安卓原生兼容服务器的定义 安卓原生兼容服务器‌指基于Android系统内核和服务框架构建的服务器环境&#xff0c;能够在不依赖第三方适配层的情况下&#xff0c;直接运行符合Android API规范的服务程序&#xff0c;并满足与其他软硬件组件的协同工作需求。其核心特征体现在以下…

优化用户体验:拦截浏览器前进后退、刷新、关闭、路由跳转等用户行为并弹窗提示

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 需求 首先列举一下需要拦截的行为&#xff0c;接下来我们逐个实现。 浏览器前进后退标签页刷新和关闭路由跳转 1、拦截浏览器前进后退 这里的实现是核心&#xff0c;涉及到大…

大学生创新创业项目管理系统设计——数据库实验九

本实验为自己设计完成&#xff0c;我当年数据库实验得了94分 目录 1.实验目的 2.实验内容和要求 3.实验步骤 4.实验心得 实验九 数据库设计 1.实验目的 掌握数据库设计的过程和方法。 2.实验内容和要求 &#xff08;35&#xff09;大学生创新创业项目管理系统设计 一…

电磁场与电场、磁场的关系

电磁场与电场、磁场之间存在着深刻的内在联系和统一性关系。这三者共同构成了电磁相互作用的基本框架&#xff0c;是理解电磁现象的关键所在。 电场和磁场实际上是电磁场的两个不同表现形式&#xff0c;它们既相互区别又密切联系。电场主要由静止电荷产生&#xff0c;表现为对…

Python爬虫实战:研究Newspaper框架相关技术

1. 引言 1.1 研究背景与意义 互联网的快速发展使得新闻信息呈现爆炸式增长&#xff0c;如何高效地获取和分析这些新闻数据成为研究热点。新闻爬虫作为一种自动获取网页内容的技术工具&#xff0c;能够帮助用户从海量的互联网信息中提取有价值的新闻内容。本文基于 Python 的 …

Kotlin MultiPlatform 跨平台版本的记账 App

前言 一刻记账 KMP (Kotlin MultiPlatform) 跨平台版本今天终于把 Android 和 iOS 进度拉齐了. 之前只有纯 Android 的版本. 最近大半年有空就在迁移代码到 KMP 上 中间学了 iOS 基础知识. xcode 的使用. 跨平台的架构的搭建… 感觉经历了很多很多. 一把辛酸泪 迁移的心路历…

PIO 中的赋值魔术,MOV 指令

前言 在普通编程语言中&#xff0c;mov 可以理解为“赋值指令”&#xff0c;将一个值从一个地方拷贝到另一个地方。在 RP2040 的 PIO 汇编语言中&#xff0c;mov 同样是数据传递的关键指令&#xff0c;但它操作的是 PIO 独有的几个寄存器。 在 PIO 中&#xff0c;你可以用 mov …

第十七次CCF-CSP算法(含C++源码)

第十七次CCF-CSP认证 小明种苹果AC代码 小明种苹果&#xff08;续&#xff09;AC代码 后面好难哈哈 小手冰凉 小明种苹果 输入输出&#xff1a; 题目链接 AC代码 #include<iostream> using namespace std; int n,m; int res,res3; int sum; int res21; int main(){cin …

打造一个支持MySQL查询的MCP同步插件:Java实现

打造一个支持MySQL查询的MCP同步插件&#xff1a;Java实现 用Java实现一个MCP本地插件&#xff0c;直接通过JDBC操作本地MySQL&#xff0c;并通过STDIO与上层MCP客户端&#xff08;例如Cursor&#xff09;通信。插件注册一个名为mysql 的同步工具&#xff0c;接收连接参数及SQL…

黑马k8s(十五)

1.Ingress介绍 2.Ingress使用 环境准备 Http代理 Https代理

解决 cursor 中不能进入 conda 虚拟环境

【问题】 遇到一个小问题&#xff0c;我创建的conda 环境在 cmd、powershell中都可以激活&#xff0c;但在pycharm、cursor中却不能激活&#xff1f; 看图 cmd中正常&#xff1a; cursor中不正常&#xff1a; 【解决方法】 cursor 中&#xff0c;打开终端&#xff0c;输入&a…

C++ 实现二叉树的后序遍历与中序遍历构建及层次遍历输出

C 实现二叉树的后序遍历与中序遍历构建及层次遍历输出 目录 C 实现二叉树的后序遍历与中序遍历构建及层次遍历输出一、实验背景与目标二、实验环境三、实验内容四、数据结构与算法数据结构算法描述1. **构建二叉树函数 buildTree**2. **层次遍历函数 LevelOrder** 关键代码与解…

虚拟环境中的PyQt5 Pycharm设置参考

假如虚拟环境名是p3939 里面安装了pyqt5相关的库 1.QtDesigner Qt Designer 是通过拖拽的方式放置控件&#xff0c;并实时查看控件效果进行快速UI设计 位置 内容 name 可以随便命名&#xff0c;只要便于记忆就可以&#xff0c;本次采取通用…

AUTOSAR图解==>AUTOSAR_SRS_LIN

AUTOSAR LIN模块分析 目录 LIN模块概述LIN模块架构LIN通信状态流程LIN通信序列LIN配置结构总结1. LIN模块概述 本文档基于AUTOSAR规范SRS_LIN文档,对LIN(Local Interconnect Network)相关模块进行详细分析。主要包括以下几个模块: LIN接口 (LinIf)LIN驱动 (Lin)LIN传输层…

华为昇腾使用ollama本地部署DeepSeek大模型

文章目录 前言一、本次使用的硬件资源二、Ollama介绍三、Ollama在arm64位的芯片的安装及使用方法总结 前言 本次打算在华为昇腾上面使用ollama进行部署DeepSeek大模型。 一、本次使用的硬件资源 存储资源 内存资源 cpu资源 二、Ollama介绍 Ollama 是一个开源的大型语言…