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-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: null,
      options: [
        { label: '选项1', value: 'option1', additionalData: '数据1' },
        { label: '选项2', value: 'option2', additionalData: '数据2' },
        // ...更多选项
      ]
    };
  },
  // 可以用watch监听,也可以用@change
  watch: {
    selectedValue(newValue) {
      const selectedItem = this.options.find(item => item.value === newValue);
      console.log(selectedItem); // 包含所有数据的选中项
    }
  }
};
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Day02-数据类型和运算符(基本数据类型转换,赋值运算符,算术运算符,关系运算符,逻辑运算符,条件运算符,位运算符,赋值运算符,运算符优先级,标点符号)

文章目录 Java基础语法学习目标1 基本数据类型转换&#xff08;Conversion&#xff09;&#xff08;掌握&#xff09;1.1 自动类型转换&#xff08;隐式类型转换&#xff09;1.2 强制类型转换&#xff08;显式类型转换&#xff09;1.3 基本数据类型与字符串类型的转换 2 运算符…

一起玩儿Proteus仿真(C51)——01. 仿真软件Proteus和开发软件Keil C51的安装

摘要&#xff1a;本文介绍仿真软件Proteus和开发软件Keil C51的安装 智能小车系列文章已经连续发布49期了。为了照顾更多读者的需求&#xff0c;从这周开始&#xff0c;新增加一个系列——Proteus仿真系列&#xff0c;这个系列的文章还是以一个个小的专题的形式&#xff0c;介绍…

数据结构(二)------单链表

制作不易&#xff0c;三连支持一下呗&#xff01;&#xff01;&#xff01; 文章目录 前言一.什么是链表二.链表的分类三.单链表的实现总结 前言 上一节&#xff0c;我们介绍了顺序表的实现与一些经典算法。 但是顺序表这个数据结构依然有不少缺陷&#xff1a; 1.顺序表指定…

(2)(2.9) Holybro Microhard P900无线电遥测设备

文章目录 前言 1 特点 2 规格 3 包装内包括 前言 Holybro Microhard Radio 集成了 microhard Pico 系列射频模块&#xff0c;能够在强大的拓扑结构中提供高性能无线串行通信&#xff0c;如点对点、点对多点和安全 Mesh&#xff08;P840 不提供 Mesh&#xff09;。 它采用跳…

多线程 之 静态代理

什么是静态代理&#xff1f; 静态代理是一种思想&#xff0c;找一个代理负责一些琐事&#xff0c;自己则专注于一件大事。 有哪些具体的表现&#xff1f; 在日常生活中做饭就是这样&#xff0c;会做饭的人需要做饭&#xff0c;那么其他的人就来帮他打杂&#xff0c;这样做饭的…

Sqli-labs-master第一关通关攻略

第一关基于错误的字符串/数字型注入 第一关打开&#xff0c;请输入id数值作为参数&#xff0c;那就输呗整个1&#xff0c;2&#xff0c;3看看效果 通过ID数值得变动&#xff0c;页面也随之发生变化&#xff0c;然后就是判断SQL语句是否拼接&#xff0c;是字符型还是数字型 输入…

DETR解读,将Transformer带入CV

论文出处 [2005.12872] End-to-End Object Detection with Transformers (arxiv.org) 一个前置知识 匈牙利算法&#xff1a;来源于二部图匹配&#xff0c;计算最小或最大匹配 算法操作&#xff1a;在n*n的矩阵中 减去行列最小值&#xff0c;更新矩阵&#xff08;此时行或者…

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

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

Java设计模式-享元模式(12)

馆长准备了很多学习资料,其中包含java方面,jvm调优,spring / spring boot /spring cloud ,微服务,分布式,前端,js书籍资料,视频资料,以及各类常用软件工具,破解工具 等资源。请关注“IT技术馆”公众号,进行关注,馆长会每天更新资源和更新技术文章等。请大家多多关注…

Vue ECharts X轴 type为value的数据格式 + X轴固定间隔并向上取整十位数 - 附完整实例

echarts&#xff1a;一个基于 JavaScript 的开源可视化图表库。 目录 效果 一、介绍 1、官方文档&#xff1a;Apache ECharts 2、官方示例 二、准备工作 1、安装依赖包 2、示例版本 三、使用步骤 1、在单页面引入 echarts 2、指定容器并设置容器宽高 3、数据处理&am…

Java: javax.net.ssl.SSLPeerUnverifiedException: peer not authenticated

我们在平时练习的时候一般使用低版本的jdk来练习&#xff0c;以便了解不同版本jdk的区别&#xff0c;下面是我们练习中遇到的问题 >>> DefaultHttpClient mHttpClient new DefaultHttpClient(new BasicHttpParams()); ClientConnectionManager ccm mHttpClien…

【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目(亲测超详细)

目 录 项目搭建步骤确定node版本使用Vite创建Vue3项目规范目录结构配置环境修改Vite配置文件集成路由工具Vue Router集成状态管理工具Pinia集成CSS预编译器Sassvite-plugin-svg-icons图标组件集成UI框架Element Plus集成HTTP 请求工具 Axios 项目代码规范集成ESLint配置集成Pre…

docker环境搭建及其安装常用软件

centos安装docker Install Docker Engine on CentOS | Docker Docs 下载docker sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo yum install -y docker-ce docker-ce-cli containerd.io…

Git学习,基础,安装,配置,笔记总结

Git安装与常用命令 本教程里的git命令例子都是在Git Bash中演示的,会用到一些基本的linux命令,在此为大家提前列举: ls/ll 查看当前目录 cat 查看文件内容 touch 创建文件 vi vi编辑器(使用vi编辑器是为了方便展示效果,学员可以记事本、editPlus、notPad++等其它编 辑…

【YOLO系列算法俯视视角下舰船目标检测】

YOLO系列算法俯视视角下舰船目标检测 数据集和模型YOLO系列算法俯视视角下舰船目标检测YOLO系列算法俯视视角下舰船目标检测可视化结果 数据集和模型 数据和模型下载&#xff1a; YOLOv6俯视视角下舰船目标检测训练好的舰船目标检测模型舰船目标检测数据YOLOv7俯视视角下舰船…

ES6.8.6 为索引映射(Mapping)创建自定义分词器,测试分词匹配效果

文章目录 环境创建索引&#xff1a;配置自定义分词器、字段指定分词器自定义分词器参数说明创建索引&#xff1a;custom_analyzer_comment 使用索引中自定义的分词器进行分词分析自定义分词器my_custom_analyzer分词测试&#xff1a;测试中文停用词、英文字母转小写测试敏感词替…

Parquet文件推送数据到OSS

1. 任务背景 任务说明&#xff1a;公司 saas 数据分析类产品&#xff0c;客户需要把行为数据回传到客户指定文件系统中&#xff08;oss&#xff09;周期&#xff1a;T1数据格式&#xff1a;parquet数据范围&#xff1a;部分表全量&#xff0c;部分表增量其他要求&#xff1a; …

STM32-LwESP 移植

LwESP 是一个专门解析 Espressif 公司旗下 ESP 系列芯片 AT 指令的开源库&#xff0c;具有以下特性&#xff1a; 支持 Espressif 公司 ESP32, ESP32-C2, ESP32-C3, ESP32-C6 和 ESP8266 芯片。独立平台&#xff0c;采用 C99 标准编写&#xff0c;易于移植。允许不同的配置来优…

【Linux】第三十九站:可重入函数、volatile、SIGCHLD信号

文章目录 一、可重入函数二、volatile三、SIGCHLD信号 一、可重入函数 如下图所示&#xff0c;当我们进行链表的头插的时候&#xff0c;我们刚刚执行完第一条语句的时候&#xff0c;突然收到一个信号&#xff0c;然后我们这个信号的自定义捕捉方法中&#xff0c;正好还有一个头…

Python模拟艾里光束:光可以不沿直线传播

文章目录 Airy光束有限能量Airy光束 Airy光束 在光学领域&#xff0c;傍轴近似下光束传输遵循方程 i ∂ ϕ ∂ z 1 z a ∂ 2 ϕ ∂ x 2 0 i\frac{\partial\phi}{\partial z}\frac{1}{z}\frac{a\partial^2\phi}{\partial x^2}0 i∂z∂ϕ​z1​∂x2a∂2ϕ​0 其中 k 2 π n …