【Vue】ElementUI下拉多选框OnChange事件,保存的id数组和对象数组的关系

ElementUI下拉多选框OnChange事件,保存的id数组和对象数组的关系

  • 简述:下拉多选框保存的是id数组,而实际上传给后端的是对象数组,这种时候的OnChange方法代码如下

简述:下拉多选框保存的是id数组,而实际上传给后端的是对象数组,这种时候的OnChange方法代码如下

             onProgramChanged(detail) {that = thiscurIds = detailpreObjs = this.ledConfs.programList;// 例如当前的id数组 curIds = [2, 3] // 之前的对象数组是 preObjs = [{"id": 1, "name": 11}, {"id": 3, "name": 33}, {"id": 5, "name": 55}]console.log(detail, preObjs)//1. 添加curIds中的新元素preIds = preObjs.map(item => { return item.id })newIds = []intersectionIds = []for (const id of curIds) {if (!preIds.includes(id)) {newIds.push(id)} else {intersectionIds.push(id)}}preObjs = preObjs.filter(item => {return intersectionIds.includes(item.id)})// console.log(that.ledConfs)for (const id of newIds) {preObjs.push({ "id": id, "name": that.optionsMap.get(id), "programTimes": 1, "programPriority": 1 })}// 排序preObjs.sort((a, b) => a.id - b.id)this.ledConfs.programList = preObjsconsole.log(preObjs)},

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

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

相关文章

Spring Cloud LoadBalancer 4.1.2

LoadBalancer位于Spring Cloud Commons 模块 Spring Cloud 提供了自己的客户端负载均衡器抽象和实现。对于负载均衡机制,添加了 ReactiveLoadBalancer 接口,并为其提供了基于Round-Robin和Random的实现。为了让实例从反应式中进行选择,使用了…

ubuntu server 22.04 安装docker、docker-compose

ubuntu server 22.04安装docker有两种方式,第一种是使用ubuntu镜像源的软件包进行安装,第二种使用官方GPG密钥手动添加Docker存储库方式进行安装,两种方式都可以,但第二种方式略复杂,这里介绍第一种比较简单的安装方式…

轻松玩转Python文件操作:移动、删除

哈喽,大家好,我是木头左! Python文件操作基础 在处理计算机文件时,经常需要执行如移动和删除等基本操作。Python提供了一些内置的库来帮助完成这些任务,其中最常用的就是os模块和shutil模块。这两个模块包含了许多与文…

无需公网IP、无需云服务器,异地组网实现远程直连NAS、游戏联机

手机图片、视频太多,存储空间不够用怎么办?出门在外无法直连家中NAS,远程访问NAS速度慢?自建私有云、多媒体服务器,如何多人远程共享媒体资源?幻兽帕鲁、我的世界、泰拉瑞亚…局域网游戏,想远程多人联机&a…

Chromium 调试指南2024 Windows11篇-VSCode必要依赖扩展(四)

1. 前言 为了在Visual Studio Code中更加方便地进行Chromium项目的开发和调试,我们需要安装一些必要的依赖扩展。本文将介绍如何安装中文语言包及其他依赖扩展,以提升我们在Visual Studio Code中的开发效率和使用体验。 2. 安装依赖扩展 在打开的Visu…

局域网手机端远程控制手机

局域网手机端远程控制手机 随着科技的进步和智能设备的普及,远程控制技术在日常生活与工作中的应用越来越广泛。其中,局域网内的手机端远程控制手机技术,因其便捷性和实用性,受到了众多用户的关注。本文将简要介绍该技术及其应用…

MySql开源闪回工具MyFlash —— 筑梦之路

github官网:https://github.com/Meituan-Dianping/MyFlash 简介 MyFlash是由美团点评公司技术工程部开发维护的一个回滚DML操作的工具。该工具通过解析v4版本的binlog,完成回滚操作。相对已有的回滚工具,其增加了更多的过滤选项&#xff0c…

在装有centOS7的虚拟机上进行MySQL的安装部署

1.MySQL数据库介绍 1.开源的,跨平台的,社区版免费 2.支持多种存储引擎 3.支持多种主从复制 MySQL版本:5.6 5.7 8.0 https://www.mysql.com MySQL官网 2.安装MySQL5.7 1.配置MySQL仓库 2.安装MySQL服务端软件 3.启动MySQL服务 s…

LeetCode 题目 117:填充每个节点的下一个右侧节点指针 II

作者介绍:10年大厂数据\经营分析经验,现任字节跳动数据部门负责人。 会一些的技术:数据分析、算法、SQL、大数据相关、python,欢迎探讨交流 欢迎加入社区:码上找工作 作者专栏每日更新: LeetCode解锁1000题…

7-Zip介绍:一个强大的开源压缩工具

介绍 7-Zip 是一个开源的文件压缩和解压缩工具,具有高压缩比和快速解压的特点。它支持多种压缩格式,包括 7z、ZIP、RAR、GZIP、TAR 等,是一个功能丰富、易于使用的压缩工具。本文将介绍7-Zip的特点、优缺点以及其在实际应用中的作用。 特点…

3. 多层感知机算法和异或门的 Python 实现

前面介绍过感知机算法和一些简单的 Python 实践,这些都是单层实现,感知机还可以通过叠加层来构建多层感知机。 2. 感知机算法和简单 Python 实现-CSDN博客 1. 多层感知机介绍 单层感知机只能表示线性空间,多层感知机就可以表示非线性空间。…

Ubuntu20.04 设置路由器

1. 网络拓扑图 2. 查看网卡信息 ip a得出如下网卡信息&#xff0c;enp1s0和enp2s0为两个网卡名称&#xff0c;以及相关两个网卡的详细信息&#xff0c;不同设备的网卡名称可能不一样 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group defaul…

使用python获取一下microsoft的搜索积分

主要使用的库是pyautogui PyAutoGUI接管了鼠标、键盘使用权,基本上完全照搬人的操作; 主要步骤如下: 登录edge浏览器打开搜索页面 找到搜索框的位置坐标使用pyautogui模拟点击搜索框模拟输入搜索文字模拟点击键盘enter键重复以上动作伪代码如下: import pyautogui import ti…

图像处理中的方向梯度直方图纹理特征提取方法

方向梯度直方图&#xff08;Histogram of Oriented Gradients&#xff0c;HOG&#xff09;是一种常用的用于图像纹理特征提取的方法。HOG算法通过计算图像中各个局部区域的梯度方向和强度&#xff0c;然后构建一个直方图来描述图像的纹理特征。 以下是使用方向梯度直方图进行纹…

WM Transaction Code 仓库管理模块事务代码大全

1.1 LE-WM 仓库管理 Warehouse Management 仓库管理事务码 描述 LB01 Create Transfer Requirement 创建转储需求 LB02 Change transfer requirement 修改转储需求 LB03 Display Transfer Requirement 显示转储需求 LB10 TRs for Storage Type 按仓储类型的转储请求 …

推荐4个可用的github国内镜像

Github是全球最大的代码托管云平台&#xff0c;超过1亿用户在平台上分享代码及数据&#xff0c;深受生物信息学软件开发者的喜爱&#xff0c;并且现在发表文章&#xff0c;若涉及到代码&#xff0c;编辑还要求我们把代码及数据存放在github上&#xff0c;以便检查数据的真实性和…

商务通设置对话永远在迷你小窗口对话

系统设置--参数设置--PC对话窗口--迷你对话窗口-- 点击浮动图标或接受邀请时在当前页面弹出迷你对话窗口

frida hook java

代码例子 原函数&#xff1a; hook函数&#xff1a; if(Java.available){Java.perform(function(){var a Java.use("com.sankuai.waimai.foundation.utils.security.a");a.a.overload("java.lang.String","java.lang.String","long"…

Angular进阶:深入理解RxJS在Angular应用中的高效运用

RxJS&#xff08;Reactive Extensions for JavaScript&#xff09;是JavaScript的一个响应式编程库&#xff0c;特别适用于处理异步数据流。 在Angular应用中&#xff0c;RxJS的高效运用主要体现在&#xff1a; 异步操作处理 RxJS的核心优势在于处理异步操作&#xff0c;如H…

【论文合集1】- 存内计算加速机器学习

本章节论文合集&#xff0c;存内计算已经成为继冯.诺伊曼传统架构后&#xff0c;对机器学习推理加速的有效解决方案&#xff0c;四篇论文从存内计算用于机器学习&#xff0c;模拟存内计算&#xff0c;对CNN/Transformer架构加速角度阐述存内计算。 【1】WWW: What, When, Where…