多sku行合并表格

先贴效果图↓

1. 先搞商品的数据结构：

除了商品名，id之类的基础东西就略过了，主要需要的数据为：

• 属性总称列表
• 属性总称对应属性子项列表 
• sku组合列表

通过以上需要的数据，可以造商品数据为：

goods: {
  goodsId: '123456789',
  goodsName: '我是一粒糖葫芦',
  goodsImg: 'https://www.jiadizhi.com/tanghulu.png',
  attrList: [{
    keyId: '11',
    keyName: '口味',
    valueList: [{
      valueId: '111',
      valueName: '焦糖'
    }, {
      valueId: '112',
      valueName: '牛奶'
    }]
  }, {
    keyId: '12',
    keyName: '温度',
    valueList: [{
      valueId: '121',
      valueName: '常温'
    }, {
      valueId: '122',
      valueName: '冰的'
    }]
  }],
  skuList: [{
    skuId: 'xxxxx0',
    attrIdGroup: '11:111,12:121',
    price: 6.00
  }, {
    skuId: 'xxxxx1',
    attrIdGroup: '11:111,12:122',
    price: 70.00
  }, {
    skuId: 'xxxxx2',
    attrIdGroup: '11:112,12:121',
    price: 10.00
  }, {
    skuId: 'xxxxx3',
    attrIdGroup: '11:112,12:122',
    price: 7.00
  }]
}
/* 以上skuList中文易看的是
口味:焦糖,温度:常温 6元,
口味:焦糖,温度:冰的 70元,
口味:牛奶,温度:常温 10元,
口味:牛奶,温度:冰的 7元
*/

2. 表格的表头

直接拿goods.attrList的外层遍历即可，这里直接以Vue示例了

<table>
  <tr>
    <th v-for="i