前端sku实现(商城中商品规格选择)
转自简书 https://www.jianshu.com/p/0376aa6e648e
一、 效果图
![](https://img2020.cnblogs.com/blog/1422761/202112/1422761-20211208191130827-1183224600.webp)
1、 先看数据 (这里是全数据 虽然有点长但是方便调试 测试)
const specList = [
{ title: "颜色", list: ["红色", "紫色", "白色", "黑色"] },
{ title: "套餐", list: ["套餐一", "套餐二", "套餐三", "套餐四"] },
{ title: "内存", list: ["64G", "128G", "256G"] }
]
const skuList = [
// { id: 1608188117177, specs: ["红色", "套餐一", "64G"] },
{ id: 1608188117178, specs: ["红色", "套餐一", "128G"] },
{ id: 1608188117179, specs: ["红色", "套餐一", "256G"] },
{ id: 1608188117180, specs: ["红色", "套餐二", "64G"] },
{ id: 1608188117181, specs: ["红色", "套餐二", "128G"] },
{ id: 1608188117182, specs: ["红色", "套餐二", "256G"] },
{ id: 1608188117183, specs: ["红色", "套餐三", "64G"] },
{ id: 1608188117184, specs: ["红色", "套餐三", "128G"] },
{ id: 1608188117185, specs: ["红色", "套餐三", "256G"] },
// { id: 1608188117186, specs: ["红色", "套餐四", "64G"] },
// { id: 1608188117187, specs: ["红色", "套餐四", "128G"] },
// { id: 1608188117188, specs: ["红色", "套餐四", "256G"] },
// { id: 1608188117189, specs: ["紫色", "套餐一", "64G"] },
// { id: 1608188117190, specs: ["紫色", "套餐一", "128G"] },
// { id: 1608188117191, specs: ["紫色", "套餐一", "256G"] },
{ id: 1608188117192, specs: ["紫色", "套餐二", "64G"] },
{ id: 1608188117193, specs: ["紫色", "套餐二", "128G"] },
{ id: 1608188117194, specs: ["紫色", "套餐二", "256G"] },
{ id: 1608188117195, specs: ["紫色", "套餐三", "64G"] },
{ id: 1608188117196, specs: ["紫色", "套餐三", "128G"] },