有没有大佬共享一下 Vue3 写的 SKU 组件后台部分代码学习学习。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 375 天前的主题，其中的信息可能已经有所发展或是发生改变。

网上的开源电商系统的代码写的真的是千奇百怪啊，有没有大佬共享一下，如题！

大佬

代码

共享

13 条回复 • 2024-01-24 15:16:34 +08:00

wednesdayco

2024-01-23 18:17:58 +08:00

这个没啥吧，蛮业务的。注意 sku 列表特别大的情况下的渲染

renmu

2024-01-23 18:37:52 +08:00 via Android

这个比我们后台的好多了

samnya

2024-01-23 18:47:37 +08:00 via Android

注册一个微店账号参考一下后台，还可以

passion336699

2024-01-23 18:50:12 +08:00

SKU Table 渲染就是求笛卡尔积，知道这个就可以完成 SKU 的组装，渲染这个 Table 。

因为 SKU 组合会随着规格熟悉复选发生顺序上的变化，所以渲染 SKU Table 的时候，你还要单独判断下 SKU 组合是否改变了，如果改变了就将其他属性变成空，没改变，就把 preSkuItem 的其他属性赋值给 nextSkuItem 。

例如，第一次，sku 组装出来是 ['红色', '128'] 设置了其他属性商品价格：123

后面做了些修改，sku 组装出来是 ['128'， '红色']，其实 sku 没有变，你可以把原来的 123 赋值过去，

这样就不用每次渲染 sku table 都清空之前的输入了，体验会好一点。

可以用这个函数，判断两个 string[] 是否有 diff ，

如果 diff === 0 ，俩数组就是相同的，例如：['红色', '128'] 和 ['128'， '红色']，

如果 diff > 0 ，俩数组就是不同的，你可以继续 push 到 skus 数组里面。

const DIFFERENCE = (a: string[], b:string[]):string[] => {
const s = new Set(b);
return a.filter((x) => !s.has(x));
};

passion336699

2024-01-23 18:54:55 +08:00

最终的 RequestDTO 和回显的 RequestDTO ，每个公司都不一样，你最后也是要组装值透传接口，或者拿到接口返回组装数据渲染。

1. 求笛卡尔积组装数据渲染 SKU Table ；
2. 再比对 SKU 组合是否发生改变来判断是否要清空或者回填 preSkuItem properties ；

如果是编辑的话，还要回传 skuItem 的 id ，只要第 2 步没有 diff ，你的 id 也是要透传进来的。

大概都是这么玩吧，个人拙见...