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

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

这个比我们后台的好多了

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

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));
};

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

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

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

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

https://codepen.io/JayceWu/pen/dOxLex 很多年前写的了，vue2 的

刚做了一个电商项目，查了资料才知道是笛卡尔积算法；

做是做出来了，sku 的名称有中文，不太满意，还没想好下一版本如何实现一个纯英文的

掘金搜 sku

https://smart-mall.g686.net/manage
预定义规格，后在商品里引用就好了，需要哪个选哪个。大平台都是预定义好了规格对应到特定的类

Vue3 源码在这 https://github.com/swq8/vue-manage

@alex8 #10 小哥你这个预定义规格的到是让我眼前一亮，有什么交流方式可以和你请教一下吗 wechat/QQ/电报都行

笛卡尔乘积，额

如图： https://bbs.cheshi-img.com/forum/202401/24/brixd3eshb.jpg