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

规格项数据设计
"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关键字…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成,具体方法取决于设备类型(如USB麦克风、3.5mm接口麦克风或HDMI音频输入)。以下是详细指南: 1. 连接音频输入设备 USB麦克风/声卡:直接插入树莓派的USB接口。3.5mm麦克…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板(STM32F103RBT6)通过I2C驱动ICM20948九轴传感器,实现姿态解算,并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化,适合嵌入式及物联网开发者。在基础驱动上新增…...
