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


    简介

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

     

    规格项数据设计

    1. "specifications": [
    2. {
    3. "goodsSpecificationId": 6,
    4. "goodsSpecificationName": "网络类型",
    5. "goodsTypeId": 24,
    6. "goodsSpecificationOptions": [
    7. {
    8. "goodsSpecificationOptionId": 12,
    9. "goodsSpecificationOptionName": "5G全网通",
    10. "goodsSpecificationId": 6
    11. },
    12. {
    13. "goodsSpecificationOptionId": 28,
    14. "goodsSpecificationOptionName": "4G全网通",
    15. "goodsSpecificationId": 6
    16. }
    17. ]
    18. },
    19. {
    20. "goodsSpecificationId": 7,
    21. "goodsSpecificationName": "机身颜色",
    22. "goodsTypeId": 24,
    23. "goodsSpecificationOptions": [
    24. {
    25. "goodsSpecificationOptionId": 13,
    26. "goodsSpecificationOptionName": "粉色",
    27. "goodsSpecificationId": 7
    28. },
    29. {
    30. "goodsSpecificationOptionId": 14,
    31. "goodsSpecificationOptionName": "白色",
    32. "goodsSpecificationId": 7
    33. },
    34. {
    35. "goodsSpecificationOptionId": 15,
    36. "goodsSpecificationOptionName": "黑色",
    37. "goodsSpecificationId": 7
    38. },
    39. {
    40. "goodsSpecificationOptionId": 16,
    41. "goodsSpecificationOptionName": "蓝色",
    42. "goodsSpecificationId": 7
    43. },
    44. {
    45. "goodsSpecificationOptionId": 17,
    46. "goodsSpecificationOptionName": "金色",
    47. "goodsSpecificationId": 7
    48. },
    49. {
    50. "goodsSpecificationOptionId": 29,
    51. "goodsSpecificationOptionName": "夏日胡杨",
    52. "goodsSpecificationId": 7
    53. }
    54. ]
    55. },
    56. {
    57. "goodsSpecificationId": 8,
    58. "goodsSpecificationName": "屏幕尺寸",
    59. "goodsTypeId": 24,
    60. "goodsSpecificationOptions": [
    61. {
    62. "goodsSpecificationOptionId": 18,
    63. "goodsSpecificationOptionName": "6.1寸",
    64. "goodsSpecificationId": 8
    65. },
    66. {
    67. "goodsSpecificationOptionId": 19,
    68. "goodsSpecificationOptionName": "6.7寸",
    69. "goodsSpecificationId": 8
    70. }
    71. ]
    72. },
    73. {
    74. "goodsSpecificationId": 9,
    75. "goodsSpecificationName": "存储容量",
    76. "goodsTypeId": 24,
    77. "goodsSpecificationOptions": [
    78. {
    79. "goodsSpecificationOptionId": 20,
    80. "goodsSpecificationOptionName": "128G",
    81. "goodsSpecificationId": 9
    82. },
    83. {
    84. "goodsSpecificationOptionId": 21,
    85. "goodsSpecificationOptionName": "256G",
    86. "goodsSpecificationId": 9
    87. },
    88. {
    89. "goodsSpecificationOptionId": 22,
    90. "goodsSpecificationOptionName": "512G",
    91. "goodsSpecificationId": 9
    92. }
    93. ]
    94. },
    95. {
    96. "goodsSpecificationId": 10,
    97. "goodsSpecificationName": "套餐类型",
    98. "goodsTypeId": 24,
    99. "goodsSpecificationOptions": [
    100. {
    101. "goodsSpecificationOptionId": 23,
    102. "goodsSpecificationOptionName": "官方标配",
    103. "goodsSpecificationId": 10
    104. },
    105. {
    106. "goodsSpecificationOptionId": 24,
    107. "goodsSpecificationOptionName": "套餐一",
    108. "goodsSpecificationId": 10
    109. },
    110. {
    111. "goodsSpecificationOptionId": 25,
    112. "goodsSpecificationOptionName": "套餐二",
    113. "goodsSpecificationId": 10
    114. },
    115. {
    116. "goodsSpecificationOptionId": 26,
    117. "goodsSpecificationOptionName": "套餐三",
    118. "goodsSpecificationId": 10
    119. }
    120. ]
    121. },
    122. {
    123. "goodsSpecificationId": 12,
    124. "goodsSpecificationName": "运行内存",
    125. "goodsTypeId": 24,
    126. "goodsSpecificationOptions": [
    127. {
    128. "goodsSpecificationOptionId": 30,
    129. "goodsSpecificationOptionName": "4G",
    130. "goodsSpecificationId": 12
    131. },
    132. {
    133. "goodsSpecificationOptionId": 32,
    134. "goodsSpecificationOptionName": "8G",
    135. "goodsSpecificationId": 12
    136. },
    137. {
    138. "goodsSpecificationOptionId": 33,
    139. "goodsSpecificationOptionName": "12G",
    140. "goodsSpecificationId": 12
    141. }
    142. ]
    143. }
    144. ]
    145. }

    问题的出现

    由于是使用一个遍历,将所有规格的数据遍历后在进行一个选中事件的处理,那么最难的部分当属于这个事件处理这块了,如何去辨别此数据是否是已选数据,同一个规格的数据等等以及如何去处理这些数据

    下面是视图层的遍历

    1. <div class="goodsDesc_select">
    2. <div v-for="item in goodsDesc.specifications" :key="item" class="goodsDesc_select_box">
    3. <div class="goodsDesc_select_name">{{ item.goodsSpecificationName }}&nbsp;:</div>
    4. <div>
    5. <ul style="display: flex;flex-wrap: wrap">
    6. <el-button
    7. v-for="type in item.goodsSpecificationOptions" :key="type.goodsSpecificationOptionId"
    8. :class="{ actived_select: type.selected}"
    9. @click="changeSelectedStatus(item,type)"
    10. >{{ type.goodsSpecificationOptionName }}
    11. </el-button>
    12. </ul>
    13. </div>
    14. </div>
    15. </div>

    解决逻辑

    算法不太好,所写的有点无脑

    1. /**
    2. * 规格选择事件
    3. */
    4. const changeSelectedStatus = (item, typeProxy) => {
    5. //判断并设置高亮
    6. if (typeProxy.selected) {
    7. typeProxy.selected = false
    8. } else {
    9. item.goodsSpecificationOptions.forEach(typeProxy => typeProxy.selected = false)
    10. typeProxy.selected = true
    11. }
    12. //把Proxy数据转换为js数据
    13. const type = JSON.parse(JSON.stringify(typeProxy))
    14. //添加所选的规格数据
    15. if (specificationOptions.length == 0) {
    16. specificationOptions.push(type)
    17. } else {
    18. specificationOptions.forEach((e) => {
    19. //如果父id相同则更改名字
    20. if (e.goodsSpecificationId == type.goodsSpecificationId) {
    21. e.goodsSpecificationOptionName = type.goodsSpecificationOptionName
    22. } else {
    23. //否则添加,这里会引发重复添加问题
    24. specificationOptions.push(type)
    25. }
    26. })
    27. }
    28. //去重复后的数组
    29. const uniqueArray = specificationOptions.reduce((accumulator, currentValue) => {
    30. if (!accumulator.includes(currentValue)) {
    31. accumulator.push(currentValue);
    32. }
    33. return accumulator;
    34. }, []);
    35. //清空specificationOptions
    36. specificationOptions.splice(0, specificationOptions.length)
    37. //复制数组
    38. for (let i = 0; i < uniqueArray.length; i++) {
    39. specificationOptions.push(uniqueArray[i])
    40. }
    41. console.log(specificationOptions)
    42. }

  • 相关阅读:
    华为机试真题 Java 实现【学生方阵】
    MAC | linux | SSH 密钥验证
    cors基础,响应头设置
    使用mybatis标签规避空where
    asio中的信号与定时器
    课程:压力管理
    c语言-函数-009
    MySQL性能优化 一、系统配置优化
    python 实现银行卡号查询银行名称和简称
    hashSet解析
  • 原文地址:https://blog.csdn.net/m0_63040701/article/details/133979492