多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
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值