简介
今天在处理规格项的数据时遇到了一些问题，接下来就给大家分享一下
规格项数据设计
"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-button
v-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;
}, []);
//清空specificationOptions
specificationOptions.splice(0, specificationOptions.length)
//复制数组
for (let i = 0; i < uniqueArray.length; i++) {
specificationOptions.push(uniqueArray[i])
}
console.log(specificationOptions)
}
