商品规格项数据的遍历以及添加
简介
今天在处理规格项的数据时遇到了一些问题,接下来就给大家分享一下
规格项数据设计
"specifications": [{"goodsSpecificationId": 6,"goodsSpecificationName": "网络类型","goodsTypeId": 24,"goodsSpecificationOptions": [{"goodsSpecificationOptionId": 12,"goodsSpecificationOptionName": "5G全网通","goodsSpecificationId": 6},{"goodsSpecificationOptionId": 28,"goodsSpecificationOptionName": "4G全网通","goodsSpecificationId": 6}]},{"goodsSpecificationId": 7,"goodsSpecificationName": "机身颜色","goodsTypeId": 24,"goodsSpecificationOptions": [{"goodsSpecificationOptionId": 13,"goodsSpecificationOptionName": "粉色","goodsSpecificationId": 7},{"goodsSpecificationOptionId": 14,"goodsSpecificationOptionName": "白色","goodsSpecificationId": 7},{"goodsSpecificationOptionId": 15,"goodsSpecificationOptionName": "黑色","goodsSpecificationId": 7},{"goodsSpecificationOptionId": 16,"goodsSpecificationOptionName": "蓝色","goodsSpecificationId": 7},{"goodsSpecificationOptionId": 17,"goodsSpecificationOptionName": "金色","goodsSpecificationId": 7},{"goodsSpecificationOptionId": 29,"goodsSpecificationOptionName": "夏日胡杨","goodsSpecificationId": 7}]},{"goodsSpecificationId": 8,"goodsSpecificationName": "屏幕尺寸","goodsTypeId": 24,"goodsSpecificationOptions": [{"goodsSpecificationOptionId": 18,"goodsSpecificationOptionName": "6.1寸","goodsSpecificationId": 8},{"goodsSpecificationOptionId": 19,"goodsSpecificationOptionName": "6.7寸","goodsSpecificationId": 8}]},{"goodsSpecificationId": 9,"goodsSpecificationName": "存储容量","goodsTypeId": 24,"goodsSpecificationOptions": [{"goodsSpecificationOptionId": 20,"goodsSpecificationOptionName": "128G","goodsSpecificationId": 9},{"goodsSpecificationOptionId": 21,"goodsSpecificationOptionName": "256G","goodsSpecificationId": 9},{"goodsSpecificationOptionId": 22,"goodsSpecificationOptionName": "512G","goodsSpecificationId": 9}]},{"goodsSpecificationId": 10,"goodsSpecificationName": "套餐类型","goodsTypeId": 24,"goodsSpecificationOptions": [{"goodsSpecificationOptionId": 23,"goodsSpecificationOptionName": "官方标配","goodsSpecificationId": 10},{"goodsSpecificationOptionId": 24,"goodsSpecificationOptionName": "套餐一","goodsSpecificationId": 10},{"goodsSpecificationOptionId": 25,"goodsSpecificationOptionName": "套餐二","goodsSpecificationId": 10},{"goodsSpecificationOptionId": 26,"goodsSpecificationOptionName": "套餐三","goodsSpecificationId": 10}]},{"goodsSpecificationId": 12,"goodsSpecificationName": "运行内存","goodsTypeId": 24,"goodsSpecificationOptions": [{"goodsSpecificationOptionId": 30,"goodsSpecificationOptionName": "4G","goodsSpecificationId": 12},{"goodsSpecificationOptionId": 32,"goodsSpecificationOptionName": "8G","goodsSpecificationId": 12},{"goodsSpecificationOptionId": 33,"goodsSpecificationOptionName": "12G","goodsSpecificationId": 12}]}]}
问题的出现
由于是使用一个遍历,将所有规格的数据遍历后在进行一个选中事件的处理,那么最难的部分当属于这个事件处理这块了,如何去辨别此数据是否是已选数据,同一个规格的数据等等以及如何去处理这些数据
下面是视图层的遍历
<div class="goodsDesc_select"><div v-for="item in goodsDesc.specifications" :key="item" class="goodsDesc_select_box"><div class="goodsDesc_select_name">{{ item.goodsSpecificationName }} :</div><div><ul style="display: flex;flex-wrap: wrap"><el-buttonv-for="type in item.goodsSpecificationOptions" :key="type.goodsSpecificationOptionId":class="{ actived_select: type.selected}"@click="changeSelectedStatus(item,type)">{{ type.goodsSpecificationOptionName }}</el-button></ul></div></div></div>
解决逻辑
算法不太好,所写的有点无脑
/*** 规格选择事件*/
const changeSelectedStatus = (item, typeProxy) => {//判断并设置高亮if (typeProxy.selected) {typeProxy.selected = false} else {item.goodsSpecificationOptions.forEach(typeProxy => typeProxy.selected = false)typeProxy.selected = true}//把Proxy数据转换为js数据const type = JSON.parse(JSON.stringify(typeProxy))//添加所选的规格数据if (specificationOptions.length == 0) {specificationOptions.push(type)} else {specificationOptions.forEach((e) => {//如果父id相同则更改名字if (e.goodsSpecificationId == type.goodsSpecificationId) {e.goodsSpecificationOptionName = type.goodsSpecificationOptionName} else {//否则添加,这里会引发重复添加问题specificationOptions.push(type)}})}//去重复后的数组const uniqueArray = specificationOptions.reduce((accumulator, currentValue) => {if (!accumulator.includes(currentValue)) {accumulator.push(currentValue);}return accumulator;}, []);//清空specificationOptionsspecificationOptions.splice(0, specificationOptions.length)//复制数组for (let i = 0; i < uniqueArray.length; i++) {specificationOptions.push(uniqueArray[i])}console.log(specificationOptions)
}
相关文章:

商品规格项数据的遍历以及添加
简介 今天在处理规格项的数据时遇到了一些问题,接下来就给大家分享一下 规格项数据设计 "specifications": [{"goodsSpecificationId": 6,"goodsSpecificationName": "网络类型","goodsTypeId": 24,"goods…...

华为eNSP配置专题-RIP路由协议的配置
文章目录 华为eNSP配置专题-RIP路由协议的配置0、概要介绍1、前置环境1.1、宿主机1.2、eNSP模拟器 2、基本环境搭建2.1、终端构成和连接2.2、终端的基本配置 3、RIP路由的配置3.1、RIP路由的配置3.2、RIP路由的删除 华为eNSP配置专题-RIP路由协议的配置 0、概要介绍 路由信息…...
【软考】软件开发中不同对象之间的关系
1. 关联(Association): 关联表示两个或多个对象之间的关系。这种关系可以是双向的,也可以是单向的。关联关系通常用于描述两个对象之间的连接,但不涉及对象之间的所有权或整体-部分的关系。 例子: 考虑一…...

iMazing苹果用户手机备份工具 兼容最新的iOS16操作系统
现在距离苹果秋季新品发布会已过去月余,新iPhone 14系列和新版的iOS 16操作系统也如约与我们见面了,相信大家在9月初抢购的iPhone 14也基本到手了,但随之到来的数据资料备份迁移却是一件令人头大的事情,使用官方提供的iTunes软件卡…...
微信小程序获取数据的方法——iBeacon蓝牙
1.判断用户是否打开蓝牙: 由于iBeacon是基于蓝牙传输数据的,所以第一步要判断是否打开蓝牙,如果没有打开则提示用户去打开蓝牙,然后在下拉刷新时重新判断,确认用户打开之后再搜索iBeacon设备 wx.openBluetoothAdapte…...

一起学数据结构(11)——快速排序及其优化
上篇文章中,解释了插入排序、希尔排序、冒泡排序、堆排序及选择排序的原理及具体代码实现本片文章将针对快速排序,快速排序的几种优化方法、快速排序的非递归进行解释。 目录 1. 快速排序原理解析以及代码实现: 2. 如何保证相遇位置的值一…...

Docker开箱即用,开发码农加分项部署技术拿下!
目录 Docker概述 效果呈现 镜像 & 镜像仓库 & 容器 镜像 DockerHub 配置国内源加速 容器 简单的命令解读 Docker基础 常用命令 案例演示 数据卷 什么是数据卷 数据卷命令 演示环节 匿名数据卷 案例演示 自定义挂载位置 案例演示 自定义镜像 镜像结构 Dockerfile …...

计算机算法分析与设计(16)---Dijkstra算法(含C++代码)
文章目录 一、知识概述1.1 算法描述1.2 例题分析 二、代码编写 一、知识概述 1.1 算法描述 1.2 例题分析 二、代码编写 输入: 第一行:图的顶点数n 第二行:图的边数k 第三行:算法起点begin,算法终点end 接下来…...

小团队之间有哪些好用免费的多人协同办公软件
在小团队协作中,选择适合的多人协同办公软件是提高工作效率和团队协作的重要一环。幸运的是,市场上有许多大多数功能都免费的多人协同办公软件,为小团队提供了强大的协作功能和便捷的工作环境。 在本文中,我将根据自己多年的在线…...

codeforces (C++ Morning)
题目: 翻译: 思路: 1、要将四位数显示,每次操作可以选择移动光标(移动到相邻的位置)或者显示数字,计算最少需要多少次操作。 2、用flag表示当前光标位置,sum为记录操作次数&#…...
Oracle数据库备份与恢复exp/imp命令
exp导出工具将数据库中数据备份压缩成一个二进制系统文件,可以在不同OS间迁移 可以导出用户所有对象以及对象中的数据;导出用户所有表或者指定的表;导出数据库中所有对象。 imp所执行的步骤: (1) create table --新建表 (2) inser…...

何为心理承受能力?如何提高心理承受能力?
心理承受能力,也可以理解为人的抗压能力,指的是承受压力,承受逆境的能力。人的一生其实就是在不断的解决问题,见招拆招,遇到问题解决问题,在我们不断学习和锻炼的过程中,提高了我们解决问题的效…...

Seata学习
Seata Seata 是一款开源的分布式事务解决方案,致力于在微服务架构下提供高性能和简单易用的分布式事务服务。 官网地址:https://seata.io/zh-cn/index.html 为什么会产生分布式事务? 示例:用户下单后需要创建订单,同时…...
探索数据结构世界之排序篇章(超级详细,你想看的都有)
-文章开头必看 1.!!!本文排序默认都是排升序 2.排序是否稳定值指指排完序之后相同数的相对位置是否改变 3.代码相关解释我都写在注释中了,方便对照着看 1.插入排序1.1直接插入排序1.2希尔排序1.2.1单趟1.2.2多趟基础版——排完一…...

偶数科技发布实时湖仓数据平台Skylab 5.3版本
近日, 偶数发布了最新的实时湖仓数据平台 Skylab 5.3 版本。Skylab包含七大产品,分别为云原生分布式数据库 OushuDB、数据分析与应用平台 Kepler、数据资产管理平台 Orbit、自动化机器学习平台 LittleBoy、数据工厂 Wasp、数据开发与调度平台 Flow、系统…...

vant组件是使用?
首先 在vue项目中使用的时候 要先下载组件 使用npm安装 # Vue 3 项目,安装最新版 Vant npm i vant# Vue 2 项目,安装 Vant 2 npm i vantlatest-v2 使用yarn安装或pnpm # 通过 yarn 安装 yarn add vant# 通过 pnpm 安装 pnpm add vant 在框架中引入即…...
CSP-S 2023 游记
开题,首先先把除了第三题的所有题看了一遍。(由于第三题太长,先放着后面再看) 决定顺序先把一二题做了。 看第一题,小小思考了一手,发现暴力可做,于是飞速码完,小小对拍一下&#…...

关于Git的入门教程(附GitHub和Gitee的使用方法)
一. Git 概述 Git是一个免费的、开源的分布式版本控制系统,可以快速高效地处理从小型到大型的各种项目。Git易于学习、占地面积小、性能极快。它具有廉价的本地库,方便的暂存区域和多个工作流分支等特性。其性能优于Subversion、CVS、Perforce和ClearCas…...

C# winform如何实现数据的保存和读取
在c#winform中我们在写程序时,经常需要进行数据处理,那么数据如何保存和读取(下面我们通过序列化和反序列化的方式来实现) 第一步: 我们建立一个winform窗体 第二步: 构建一个外部实体类(Student类) 第…...

【Java基础面试四十一】、说一说你对static关键字的理解
文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。 面试官:说一说你对static关键字…...

遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...

轻量级Docker管理工具Docker Switchboard
简介 什么是 Docker Switchboard ? Docker Switchboard 是一个轻量级的 Web 应用程序,用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器,使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...
游戏开发中常见的战斗数值英文缩写对照表
游戏开发中常见的战斗数值英文缩写对照表 基础属性(Basic Attributes) 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...