vue通過笛卡兒積實(shí)現(xiàn)sku庫存配置方式
更新時(shí)間：2023年04月19日 10:36:46 作者：淺巷陌漓
這篇文章主要介紹了vue通過笛卡兒積實(shí)現(xiàn)sku庫存配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue通過笛卡兒積實(shí)現(xiàn)sku庫存配置
目標(biāo)
通過頁面上渲染出來的動(dòng)態(tài)屬性 實(shí)現(xiàn)sku庫存配置
將已選擇的所有屬性，通過笛卡兒積實(shí)現(xiàn)sku庫存配置
以兩個(gè)屬性為例子，舉例說明：
1x1:
白色
S
結(jié)合之后就是
[白色,S]
?this.selectCheckArr=[
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ]
]
?this.selectCheckArr = this.getProducts(this.selectCheckArr)
?console.log(this.selectCheckArr)
?/** 輸出：[
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ]
]
**/1x2
白色 黃色
S
結(jié)合之后就是
[白色,S ],[黃色,S ]
?this.selectCheckArr=[
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 01,
? ? ? ? ? ? "attrValueName": "黃色"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ]
]
?this.selectCheckArr = this.getProducts(this.selectCheckArr)
?console.log(this.selectCheckArr)
?/** 輸出：?
?[
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 01,
? ? ? ? ? ? "attrValueName": "黃色"
? ? ? ? },
? ? ? ?{
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ]
]
**/2x2
白 黃
S M
結(jié)合之后就是
[白色,S ],[白色,M ],[黃色,S ],[黃色,M ]
?this.selectCheckArr= [
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 01,
? ? ? ? ? ? "attrValueName": "黃色"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 12,
? ? ? ? ? ? "attrValueName": "M"
? ? ? ? }
? ? ]
]
?this.selectCheckArr = this.getProducts(this.selectCheckArr)
?console.log(this.selectCheckArr)
?/** 輸出：?
?[
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 12,
? ? ? ? ? ? "attrValueName": "M"
? ? ? ? }
? ? ],
? ? [
? ? ? ? ?{
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 01,
? ? ? ? ? ? "attrValueName": "黃色"
? ? ? ? },
? ? ? ? ?{
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 01,
? ? ? ? ? ? "attrValueName": "黃色"
? ? ? ? },
? ? ? ?{
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 12,
? ? ? ? ? ? "attrValueName": "M"
? ? ? ? }
? ? ]
]
**/笛卡兒積方法
? ? // 笛卡兒積
? ? ? getProducts(specs) {
? ? ? ? if (!specs || specs.length == 0) {
? ? ? ? ? return [];
? ? ? ? } else {
? ? ? ? ? return joinSpec([
? ? ? ? ? ? []
? ? ? ? ? ], specs, 0, specs.length - 1);
? ? ? ? }
? ? ? ? function joinSpec(prevProducts, specs, i, max) {
? ? ? ? ? var currentProducts = [],
? ? ? ? ? ? currentProduct, currentSpecs = specs[i];
? ? ? ? ? if (i > max) {
? ? ? ? ? ? return prevProducts;
? ? ? ? ? }
? ? ? ? ? prevProducts.forEach(function (prevProduct) {
? ? ? ? ? ? currentSpecs.forEach(function (spec) {
? ? ? ? ? ? ? currentProduct = prevProduct.slice(0);
? ? ? ? ? ? ? currentProduct.push(spec);
? ? ? ? ? ? ? currentProducts.push(currentProduct);
? ? ? ? ? ? });
? ? ? ? ? });
? ? ? ? ? return joinSpec(currentProducts, specs, ++i, max);
? ? ? ? }
? ? ? },注意
this.getProducts()的入?yún)?，需與博主保持一致(數(shù)組對(duì)象)，否則會(huì)有問題哦~
如果是1x1 ，就是總共生成1條
[ [ { } ] , [ { } ] ]，變成 [ [ { } , { } ] ]
如果是2x1 ，就是總共生成2條
[ [ { } ,{ } ] , [ { } ] ] 變成 [ [ { } ,{ } ] , [ { } ,{ } ] ]
笛卡爾積生成商品SKU組合
var arr = [
['黑色', '白色', '藍(lán)色'],
['8GB', '16GB', '32GB'],
['大', '中', '小']
];
/**
* 生成笛卡爾積
* @returns {*}
*/
function descartes(array) {
if (array.length < 2) return array[0] || [];
return [].reduce.call(array, function (col, set) {
var res = [];
col.forEach(function (c) {
set.forEach(function (s) {
var t = [].concat(Array.isArray(c) ? c : [c]);
t.push(s);
res.push(t);
})
});
return res;
});
}
console.log(descartes(arr));該方法用于根據(jù)商品規(guī)格屬性生成商品SKU組合，以上為javascript代碼
執(zhí)行結(jié)果如下：
0: ["黑色", "8GB", "大"]
1: ["黑色", "8GB", "中"]
2: ["黑色", "8GB", "小"]
3: ["黑色", "16GB", "大"]
4: ["黑色", "16GB", "中"]
5: ["黑色", "16GB", "小"]
6: ["黑色", "32GB", "大"]
7: ["黑色", "32GB", "中"]
8: ["黑色", "32GB", "小"]
9: ["白色", "8GB", "大"]
10: ["白色", "8GB", "中"]
11: ["白色", "8GB", "小"]
12: ["白色", "16GB", "大"]
13: ["白色", "16GB", "中"]
14: ["白色", "16GB", "小"]
15: ["白色", "32GB", "大"]
16: ["白色", "32GB", "中"]
17: ["白色", "32GB", "小"]
18: ["藍(lán)色", "8GB", "大"]
19: ["藍(lán)色", "8GB", "中"]
20: ["藍(lán)色", "8GB", "小"]
21: ["藍(lán)色", "16GB", "大"]
22: ["藍(lán)色", "16GB", "中"]
23: ["藍(lán)色", "16GB", "小"]
24: ["藍(lán)色", "32GB", "大"]
25: ["藍(lán)色", "32GB", "中"]
26: ["藍(lán)色", "32GB", "小"]
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了詳解Vue Cli瀏覽器兼容性實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue3實(shí)現(xiàn)簡約型側(cè)邊欄的示例代碼
本文主要介紹了Vue3實(shí)現(xiàn)簡約型側(cè)邊欄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vite中自制mock服務(wù)器(不使用第三方服務(wù))
本文主要介紹了Vite中自制mock服務(wù)器，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開發(fā)中非常常見,我們經(jīng)常需要在頁面中為某個(gè)DOM元素綁定事件,如點(diǎn)擊、鼠標(biāo)移動(dòng)、鍵盤敲擊等等,需要的朋友可以參考下2023-09-09
前端實(shí)現(xiàn)不同角色登入展示不同頁面效果實(shí)例
要實(shí)現(xiàn)不同角色登錄跳轉(zhuǎn)不同的前端頁面,可以在登錄成功后,根據(jù)用戶的角色信息,使用路由跳轉(zhuǎn)到不同的頁面,這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)不同角色登入展示不同頁面效果的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue組件之間通信的七種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
在許多Web應(yīng)用程序中，日歷是一個(gè)常見的組件，它通常用于顯示日期、安排會(huì)議、查看活動(dòng)等，在Vue中，我們可以使用第三方庫來輕松實(shí)現(xiàn)日歷功能，也可以手動(dòng)編寫代碼來實(shí)現(xiàn)日歷的展示和操作，本文將介紹如何使用vue-calendar和手動(dòng)編寫代碼來實(shí)現(xiàn)日歷功能2023-07-07
這篇文章主要為大家介紹了vue的生命周期，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
vue動(dòng)態(tài)添加路由addRoutes之不能將動(dòng)態(tài)路由存入緩存的解決
這篇文章主要介紹了vue動(dòng)態(tài)添加路由addRoutes之不能將動(dòng)態(tài)路由存入緩存的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
VUE + UEditor 單圖片跨域上傳功能的實(shí)現(xiàn)方法
這篇文章主要介紹了VUE + UEditor 單圖片跨域上傳功能的實(shí)現(xiàn)方法，需要的朋友參考下2018-02-02