先贴效果图↓
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