商品规格项数据的遍历以及添加

简介

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

规格项数据设计

 "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-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)
}