vue3 数据逻辑处理 将同一个 对应的id 的区分出来

先上代码

   const groupedOptions = {} // 使用对象来存储分组结果data.list.forEach(item => {
// 遍历 groupList.value,检查是否有匹配的 idgroupList.value.forEach(group => {if (group.id === item.groupId) {// 如果 group.id 在 groupedOptions 中不存在,则初始化它if (!groupedOptions[group.groupName]) {groupedOptions[group.groupName] = []}// 将当前 item 添加到匹配的组中groupedOptions[group.groupName].push({value: item.id,label: item.nickName,})}})})// 将 groupedOptions 转换为 options.value 所需的格式options.value = Object.keys(groupedOptions).map(groupName => ({label: groupName,options: groupedOptions[groupName],}))

我这个主要处理这个问题 (groupList)

[{"id": "1","groupName": "xxx","userId": "1251139989602463744","createTime": "1718594337191","updateTime": "1718594337191","channel": 3},{"id": "2","groupName": "bbb","userId": "1251139989602463744","createTime": "1718441669851","updateTime": "1718441669851","channel": 3},{"id": "3","groupName": "ccc","userId": "1251139989602463744","createTime": "1718441665340","updateTime": "1718441665340","channel": 3}
]

data.list

[{"id": "1252211435414130688","nickName": "闪电票务","groupId": "1","customerId": "0",{"id": "1251590257989292032","nickName": "xxx","groupId": "1",},{"id": "1251590257989292032","nickName": "ccc","groupId": "3",},{"id": "1251590257989292032","nickName": "xxx","groupId": "2",},{"id": "1251590257989292032","nickName": "xxx","groupId": "2",},{"id": "1251590257989292032","nickName": "xxx","groupId": "3",},]

把这个分组 一下 放在一起 变成这样的数据

[{label: 'Manager',options: [{value: 'jack',label: 'Jack',},{value: 'lucy',label: 'Lucy',},],},{label: 'Engineer',options: [{value: 'yiminghe',label: 'Yiminghe',},],},]

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

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

相关文章

C#结合JS 修改解决 KindEditor 弹出层问题

目录 问题现象 原因分析 范例运行环境 解决问题 修改 kindeditor.js C# 服务端更新 小结 问题现象 KindEditor 是一款出色的富文本HTML在线编辑器,关于编辑器的详细介绍可参考我的文章《C# 将 TextBox 绑定为 KindEditor 富文本》,这里我们讲述在…

人工智能不是一根魔杖——它有内在的问题

人工智能不是一根魔杖——它有内在的问题,很难解决,而且可能很危险 到目前为止,我们都听说过很多关于人工智能(AI)的事情。你可能已经使用过无数可用的人工智能工具。对一些人来说,人工智能就像一根预测未来的魔杖。 但人工智能…

[原创][Delphi多线程]使用TMonitor, TEvent和TQueue配合实现TThreadQueue的经典使用案例.

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delph…

1 小时快速入门 DolphinDB

自从 DolphinDB 技能认证上线以来,大家学习和报考的热情就一路高涨。为了响应这份热情,DolphinDB 推出了一系列在线免费培训课程视频来帮助大家系统地学习和掌握 DolphinDB。 经过前后数月的精心准备和科学编排,《 DolphinDB 数据库入门》系…

Eureka Client 配置与高级功能

在上一篇文章中,我们介绍了 Eureka 的基本概念以及如何配置 Eureka Server。在这篇文章中,我们将继续介绍 Eureka Client 的配置以及 Eureka 的一些高级功能。 一、Eureka Client 配置 在一个微服务项目中,需要配置 Eureka Client 以便向 E…

有没有和ai聊天的软件?介绍这三款聊天软件

有没有和ai聊天的软件?在科技飞速发展的今天,人工智能(AI)已经渗透到我们生活的方方面面,其中AI聊天软件以其独特的魅力,赢得了越来越多用户的青睐。今天,我们就来一起探索三款智能聊天软件的功…

LogicFlow 学习笔记——9. LogicFlow 进阶 节点

LogicFlow 进阶 节点(Node) 连线规则 在某些时候,我们可能需要控制边的连接方式,比如开始节点不能被其他节点连接、结束节点不能连接其他节点、用户节点后面必须是判断节点等,想要达到这种效果,我们需要为…

Typora—适用于 Mac 和 Win 系统的优秀 Markdown 文本编辑器

Typora 是一款适用于 Mac 和 Win 系统的优秀 Markdown 文本编辑器,它以其简洁易用的界面和强大的功能受到了众多用户的喜爱。 首先,Typora 的界面设计非常简洁直观,没有过多繁杂的菜单和按钮,让用户能够专注于写作本身。它采用实时…

Java高级编程技术详解:从多线程到算法优化的全面指南

复杂度与优化 复杂度与优化在算法中的应用 算法复杂度是衡量算法效率的重要指标。了解和优化算法复杂度对提升程序性能非常关键。本文将介绍时间复杂度和空间复杂度的基本概念,并探讨一些优化技术。 时间复杂度和空间复杂度 时间复杂度表示算法执行所需时间随输…

LVS – NAT 模式集群构建

目录 1 环境准备 1.1 准备四台服务器 1.2 IP与网关均按照下图配置 1.3 网卡配置 1.4 real server 安装 web服务 1.5 安装ipvsadm 管理工具 2 使用ipvsadm管理LVS 2.1 创建集群指定使用的算法 2.2 添加真实服务器指定工作原理 2.3 查看是否正确创建集群 2.4 开启FORWARD路由转发…

每日一练 - PIM协议报文类型辨析

01 真题题目 在 PIM 协议中可能存在的报文是: A. JOIN/PRUNE B. ASSERT C. BOOTSTRAP D. REGISTER 02 真题答案 AB 03 答案解析 PIM(Protocol Independent Multicast)协议有两个主要的操作模式:PIM-Dense Mode (PIM-DM) 和 PIM…

​一个高清影像下载插件

数据是GIS的血液! 虽然我们在水经微图(简称“微图”)中可以下载各种各样丰富的地图数据,但相信大家对数据的追求是无止境的。 我们现在就来分享一下,如何在QGIS中下载高清卫星影像的方法。 如果你需要最新版本的QGI…

最新下载:Hype 4 mac版【软件附加安装教程】

Hype是一款强大的Mac OS平台 HTML5 创作工具,它可以在网页上做出赏心悦目的动画效果,创建丰富的网页交互动画,支持层、时间轴等编辑方式,并能很好的导出HTML5/CSS3/JavaScript,在台式机,智能手机和iPad上流…

一、sorted()函数的使用

numbers[2,23,1,3,434,23,23] demosorted(numbers)#正常升序 print("\n") print(demo) demo1sorted(numbers,reverseTrue)#加上reverse变为降序 demo2sorted(numbers,reverseFalse)#加上reverse变为降序 print(demo1) print(demo2)#reverse默认为False names[Addf,aD…

裁剪图片的最简单方法?这四种裁剪方法真的超级简单!

裁剪图片的最简单方法?在丰富多彩的现代生活中,图片成为了我们表达、沟通甚至展示身份的重要媒介,然而,无论是出于个人审美还是专业需求,图片的格式和尺寸往往成为了我们不得不面对的问题,特别是那些未经雕…

flink1.12.0学习笔记(一)-部署与入门

flink1.12.0学习笔记(1)-部署与入门 1-1-Flink概述 Flink诞生 Flink 诞生于欧洲的一个大数据研究项目 StratoSphere。该项目是柏林工业大学的一个研究性项目。早期, Flink 是做 Batch 计算的,但在 2014 年, StratoS…

mathtype7.6官方无需激活版安装包下载

大家好,今天我要和大家分享的是一款非常实用的数学工具——mathtype7.6最新版本!📐 作为一个数学专业的学生,我经常需要处理大量的数学公式和符号。以前我都是用手写或者电脑自带的公式编辑器,但是效率低下而且容易出错…

React中数据响应式原理

React作为当下最流行的前端框架之一,以其声明式编程和组件化架构而广受开发者喜爱。而React的数据响应式原理,是其高效更新DOM的核心机制。本文将深入探讨React中数据响应式原理,并结合代码示例进行论证。 响应式原理概述 在React中&#x…

课设--学生成绩管理系统(二)

欢迎来到 Papicatch的博客 目录 🐋引言 🦈编写目的 🦈项目说明 🐋产品介绍 🦈产品概要说明 🦈产品用户定位 🦈产品中的角色 🐋 产品总体业务流程图 🐋 产品功…

装机必备-WinRAR安装教程

软件介绍:WinRAR 是一款功能强大的压缩包管理器,可用于备份数据,缩减电子邮件附件的大小,解压缩从 Internet 上下载的RAR、ZIP及其它类型文件,新建 RAR 及 ZIP 格式等的压缩类文件。这是我们新电脑或重装系统后必须安装…