Vue array object, multiple objects in the array will merge the same colorName value

**

Object.values(), xx.reduce((prev, cur, index)) methods are used here

**

First of all, the data source looks like this

insert image description here

The desired effect is to look like this
insert image description here
code

skuSizeData is the data source
skuSizePropData is before I get all the sizes by de-reordering and inserting them into an array; example: ['XL', '2XL'] xx.reduce method prev is the previous element, cur
means the current Original, there is a {} at the end, which means to initialize an empty object and return an object
Object.values ​​to get the value of the object every time

// skuSizeData 是数据源
// skuSizePropData 是在此之前我将所有的尺码进行一个去重排序获取,插入到一个数组;例: ['XL', '2XL']
skuSizeData = Object.values(skuSizeData.reduce((prev: {
     
      [x: string]: any; }, cur: {
     
      [x: string]: any; colorName: string|number; }) => {
    
    
        if (prev[cur.colorName]) {
    
    
          skuSizePropData.forEach((item: string|number) => {
    
    
            if (cur[item]) prev[cur.colorName][item] = cur[item];
          });
        } else {
    
    
          prev[cur.colorName] = {
    
     ...cur };
        }
        return prev;
      }, {
    
    }));
    });

Guess you like

Origin blog.csdn.net/JunVei/article/details/128503042