這是個人在理解sku思路後，參考淘寶用vue來實現的，有更好的方式，大家提醒一下。
組件設計：
關於sku商品選擇的實現思路，大家可以看看：sku商品選擇實現思路
組件變量設置：
變量設置前大家一定要確定sku的數據結構：這是我個人的，僅供參考。
skuInfo:{
// 默認商品 sku 縮略圖
"picture": 'http://s11.mogucdn.com/mlcdn/c45406/180822_3j9j174g9laj1h7a1ii4786jgghb1_640x960.jpg',
"productId":"",
"defaultPrice": "68.00~98.00",
"priceRange": "68.00~98.00",
"totalStock": 11117,
"skus": [
{
"skuId": "3840845646137",
"price": 100, // 價格（單位分）
"stock_num": 110, // 當前 sku 組合對應的庫存
"img":"//s11.mogucdn.com/mlcdn/c45406/180822_3j9j174g9laj1h7a1ii4786jgghb1_640x960.jpg",
"propPath": "20549:672896046;1627207:3861844"
},
{
"skuId": "3840845646082",
"price": 100, // 價格（單位分）
"stock_num": 110, // 當前 sku 組合對應的庫存
"img":"//s11.mogucdn.com/mlcdn/c45406/180822_3j9j174g9laj1h7a1ii4786jgghb1_640x960.jpg",
"propPath": "20549:152524919;1627207:3861844"
},
{
"skuId": "3840845646087",
"price": 100, // 價格（單位分）
"stock_num": 110, // 當前 sku 組合對應的庫存
"img":"//s11.mogucdn.com/mlcdn/c45406/180822_3j9j174g9laj1h7a1ii4786jgghb1_640x960.jpg",
"propPath": "20549:155046983;1627207:3861844"
},
{
"skuId": "3840845646139",
"price": 100, // 價格（單位分）
"stock_num": 110, // 當前 sku 組合對應的庫存
"img":"//s5.mogucdn.com/mlcdn/c45406/180822_6fj224cck2aj4j7e52ebfj09hd01l_640x960.jpg",
"propPath": "20549:672896046;1627207:570490570"
}
],
"props": [
{
"pid": "20549",
"name": "尺碼",
"values": [
{
"vid": "147478970",
"name": "34 內長21.8CM"
},
{
"vid": "296172561",
"name": "35 內長22.5CM"
},
{
"vid": "59280855",
"name": "36 內長23.2CM"
},
{
"vid": "72380707",
"name": "37 內長23.9CM"
},
{
"vid": "103189693",
"name": "38 內長24.6CM"
}
]
},
{
"pid": "1627207",
"name": "顏色分類",
"values": [
{
"vid": "3861844",
"name": "海軍藍",
"image": "//img.alicdn.com/imgextra/i4/676005100/TB2o.vtketTMeFjSZFOXXaTiVXa_!!676005100.jpg"
},
{
"vid": "9848769",
"name": "彩蘭",
"image": "//img.alicdn.com/imgextra/i3/676005100/TB2pIXPpNxmpuFjSZFNXXXrRXXa_!!676005100.jpg"
},
{
"vid": "454946651",
"name": "灰色/淺藍色",
"image": "//img.alicdn.com/imgextra/i3/676005100/TB2AmMymYBkpuFjy1zkXXbSpFXa_!!676005100.jpg"
},
{
"vid": "3334600",
"name": "玫紅",
"image": "//img.alicdn.com/imgextra/i4/676005100/TB22EANm80kpuFjSsziXXa.oVXa_!!676005100.jpg"
},
{
"vid": "570490570",
"name": "桃紅（粉色）",
"image": "//img.alicdn.com/imgextra/i2/676005100/TB2WbibpH4npuFjSZFmXXXl4FXa_!!676005100.jpg"
}
]
}
]
},
具體代碼，我就不上傳了大家可以去git上看看：https://github.com/jamesenter/ghmall