商品规格项数据的遍历以及添加
简介
今天在处理规格项的数据时遇到了一些问题,接下来就给大家分享一下

规格项数据设计
"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关键字…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
Spring Boot 实现流式响应(兼容 2.7.x)
在实际开发中,我们可能会遇到一些流式数据处理的场景,比如接收来自上游接口的 Server-Sent Events(SSE) 或 流式 JSON 内容,并将其原样中转给前端页面或客户端。这种情况下,传统的 RestTemplate 缓存机制会…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...
