vue前端sku實(shí)現(xiàn)的方法小結(jié)
更新時(shí)間：2024年11月07日 11:06:57 作者：寰夢(mèng)
這篇文章主要為大家詳細(xì)介紹了vue前端sku實(shí)現(xiàn)的相關(guān)方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
this.value.skuStockList = [];
let skuList = this.value.skuStockList;
//只有一個(gè)屬性時(shí)
if (this.selectProductAttr.length === 1) {
let attr = this.selectProductAttr[0];
for (let i = 0; i < attr.values.length; i++) {
skuList.push({
spData: JSON.stringify([{key:attr.name,value:attr.values[i]}])
});
}
} else if (this.selectProductAttr.length === 2) {
let attr0 = this.selectProductAttr[0];
let attr1 = this.selectProductAttr[1];
for (let i = 0; i < attr0.values.length; i++) {
if (attr1.values.length === 0) {
skuList.push({
spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
});
continue;
}
for (let j = 0; j < attr1.values.length; j++) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
skuList.push({
spData: JSON.stringify(spData)
});
}
}
} else {
let attr0 = this.selectProductAttr[0];
let attr1 = this.selectProductAttr[1];
let attr2 = this.selectProductAttr[2];
for (let i = 0; i < attr0.values.length; i++) {
if (attr1.values.length === 0) {
skuList.push({
spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
});
continue;
}
for (let j = 0; j < attr1.values.length; j++) {
if (attr2.values.length === 0) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
skuList.push({
spData: JSON.stringify(spData)
});
continue;
}
for (let k = 0; k < attr2.values.length; k++) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
spData.push({key:attr2.name,value:attr2.values[k]});
skuList.push({
spData: JSON.stringify(spData)
});
}
}
}
}假設(shè)的選擇屬性數(shù)據(jù)
假設(shè)選擇的商品屬性如下（可以根據(jù)需要調(diào)整）：
this.selectProductAttr = [
{ name: "顏色", values: ["紅色", "藍(lán)色"] },
{ name: "大小", values: ["S", "M"] },
{ name: "材質(zhì)", values: ["棉", "羊毛"] }
];
初始化部分
首先，代碼初始化了一個(gè)空數(shù)組 skuStockList，并通過 skuList 引用指向該數(shù)組。
this.value.skuStockList = []; let skuList = this.value.skuStockList;
這段代碼的目的是為后續(xù)生成的 SKU 列表提供一個(gè)存儲(chǔ)地方。
處理不同數(shù)量的屬性
接下來，代碼根據(jù) this.selectProductAttr.length 的值判斷當(dāng)前有多少個(gè)屬性被選擇。根據(jù)屬性的數(shù)量，代碼將生成不同數(shù)量的組合 SKU。
1. 只有一個(gè)屬性時(shí)
if (this.selectProductAttr.length === 1) {
let attr = this.selectProductAttr[0]; // 獲取第一個(gè)屬性
for (let i = 0; i < attr.values.length; i++) { // 遍歷該屬性的所有值
skuList.push({
spData: JSON.stringify([{ key: attr.name, value: attr.values[i] }])
});
}
}
執(zhí)行過程：
- 只有一個(gè)屬性 "顏色"，其值為 ["紅色", "藍(lán)色"]。
- 對(duì)這個(gè)屬性的每一個(gè)值，生成一個(gè) SKU 并推入 skuList。
結(jié)果：
[
{"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"藍(lán)色\"}]"}
]
2. 有兩個(gè)屬性時(shí)
else if (this.selectProductAttr.length === 2) {
let attr0 = this.selectProductAttr[0]; // 獲取第一個(gè)屬性
let attr1 = this.selectProductAttr[1]; // 獲取第二個(gè)屬性
for (let i = 0; i < attr0.values.length; i++) { // 遍歷第一個(gè)屬性的所有值
if (attr1.values.length === 0) { // 如果第二個(gè)屬性沒有值
skuList.push({
spData: JSON.stringify([{ key: attr0.name, value: attr0.values[i] }])
});
continue; // 跳過當(dāng)前循環(huán)，繼續(xù)處理下一個(gè)第一個(gè)屬性的值
}
for (let j = 0; j < attr1.values.length; j++) { // 遍歷第二個(gè)屬性的所有值
let spData = [];
spData.push({ key: attr0.name, value: attr0.values[i] }); // 添加第一個(gè)屬性的值
spData.push({ key: attr1.name, value: attr1.values[j] }); // 添加第二個(gè)屬性的值
skuList.push({
spData: JSON.stringify(spData)
});
}
}
}執(zhí)行過程：
- 有兩個(gè)屬性 "顏色" 和 "大小"，其中 "顏色" 有 ["紅色", "藍(lán)色"]，"大小" 有 ["S", "M"]。
- 代碼會(huì)生成兩個(gè)屬性的所有組合。即，遍歷 "顏色" 的每一個(gè)值，并與 "大小" 的每個(gè)值進(jìn)行配對(duì)。
結(jié)果：
[
{"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"S\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"M\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"藍(lán)色\"},{\"key\":\"大小\",\"value\":\"S\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"藍(lán)色\"},{\"key\":\"大小\",\"value\":\"M\"}]"}
]
3. 有三個(gè)屬性時(shí)
else {
let attr0 = this.selectProductAttr[0]; // 獲取第一個(gè)屬性
let attr1 = this.selectProductAttr[1]; // 獲取第二個(gè)屬性
let attr2 = this.selectProductAttr[2]; // 獲取第三個(gè)屬性
for (let i = 0; i < attr0.values.length; i++) { // 遍歷第一個(gè)屬性的所有值
if (attr1.values.length === 0) { // 如果第二個(gè)屬性沒有值
skuList.push({
spData: JSON.stringify([{ key: attr0.name, value: attr0.values[i] }])
});
continue; // 跳過當(dāng)前循環(huán)，繼續(xù)處理下一個(gè)第一個(gè)屬性的值
}
for (let j = 0; j < attr1.values.length; j++) { // 遍歷第二個(gè)屬性的所有值
if (attr2.values.length === 0) { // 如果第三個(gè)屬性沒有值
let spData = [];
spData.push({ key: attr0.name, value: attr0.values[i] }); // 添加第一個(gè)屬性的值
spData.push({ key: attr1.name, value: attr1.values[j] }); // 添加第二個(gè)屬性的值
skuList.push({
spData: JSON.stringify(spData)
});
continue; // 跳過當(dāng)前循環(huán)，繼續(xù)處理下一個(gè)第二個(gè)屬性的值
}
for (let k = 0; k < attr2.values.length; k++) { // 遍歷第三個(gè)屬性的所有值
let spData = [];
spData.push({ key: attr0.name, value: attr0.values[i] }); // 添加第一個(gè)屬性的值
spData.push({ key: attr1.name, value: attr1.values[j] }); // 添加第二個(gè)屬性的值
spData.push({ key: attr2.name, value: attr2.values[k] }); // 添加第三個(gè)屬性的值
skuList.push({
spData: JSON.stringify(spData)
});
}
}
}
}執(zhí)行過程：
有三個(gè)屬性 "顏色"、"大小" 和 "材質(zhì)"，其值分別為：
- "顏色"：["紅色", "藍(lán)色"]
- "大小"：["S", "M"]
- "材質(zhì)"：["棉", "羊毛"]
代碼會(huì)生成三個(gè)屬性的所有組合。即，遍歷 "顏色" 的每一個(gè)值，和 "大小"、"材質(zhì)" 的每個(gè)值進(jìn)行配對(duì)。
結(jié)果：
[
{"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材質(zhì)\",\"value\":\"棉\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材質(zhì)\",\"value\":\"羊毛\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材質(zhì)\",\"value\":\"棉\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材質(zhì)\",\"value\":\"羊毛\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"藍(lán)色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材質(zhì)\",\"value\":\"棉\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"藍(lán)色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材質(zhì)\",\"value\":\"羊毛\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"藍(lán)色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材質(zhì)\",\"value\":\"棉\"}]"},
{"spData": "[{\"key\":\"顏色\",\"value\":\"藍(lán)色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材質(zhì)\",\"value\":\"羊毛\"}]"}
]
總結(jié)
- 代碼根據(jù)選擇的商品屬性數(shù)量動(dòng)態(tài)生成不同數(shù)量的 SKU 組合。
- 當(dāng)屬性數(shù)量為 1 時(shí)，生成一個(gè)包含該屬性所有值的 SKU 列表。
- 當(dāng)屬性數(shù)量為 2 時(shí)，生成包含這兩個(gè)屬性所有值的組合 SKU 列表。
- 當(dāng)屬性數(shù)量為 3 時(shí)，生成包含三個(gè)屬性的所有組合 SKU 列表。
- 每一個(gè) SKU 都是一個(gè)包含屬性名和值的 JSON 字符串，保存在 skuStockList 中。
通過這些步驟，代碼可以靈活地處理多屬性商品的不同組合，最終生成不同的 SKU 列表。
到此這篇關(guān)于vue前端sku實(shí)現(xiàn)的方法小結(jié)的文章就介紹到這了,更多相關(guān)vue sku內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式
這篇文章主要介紹了VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue中路由跳轉(zhuǎn)的多種方式(和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別)
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來實(shí)現(xiàn)路由跳轉(zhuǎn),本文給大家分享vue中路由跳轉(zhuǎn)的幾種方式（和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別）,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了詳解Vue的ref特性的使用,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
vue中實(shí)現(xiàn)先請(qǐng)求數(shù)據(jù)再渲染dom分享
下面小編就為大家分享一篇vue中實(shí)現(xiàn)先請(qǐng)求數(shù)據(jù)再渲染dom分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue ElementUI中el-table表格嵌套樣式問題小結(jié)
這篇文章主要介紹了Vue ElementUI中el-table表格嵌套樣式問題小結(jié),兩個(gè)表格嵌套,當(dāng)父表格有children數(shù)組時(shí)子表格才展示,對(duì)Vue ElementUI中el-table表格嵌套樣式問題感興趣的朋友跟隨小編一起看看吧2024-02-02
Computed 計(jì)算屬性是 Vue 中常用的一個(gè)功能，本篇文章主要介紹了Vue Computed 計(jì)算屬性原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法大全
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法的相關(guān)資料,文中通過圖文將解決的過程介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
詳解Vue開發(fā)網(wǎng)站seo優(yōu)化方法
這篇文章主要介紹了Vue開發(fā)網(wǎng)站seo優(yōu)化方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
編程式路由在我們的項(xiàng)目使用過程中最常用的的方法了。這篇文章主要介紹了講解vue-router之什么是編程式路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05