提供北京国互网网站建设西安优化外

简介

今天在处理规格项的数据时遇到了一些问题，接下来就给大家分享一下

规格项数据设计

 "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 }}&nbsp;:</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)
}