vue前端sku實現(xiàn)的方法小結

更新時間：2024年11月07日 11:06:57 作者：寰夢

這篇文章主要為大家詳細介紹了vue前端sku實現(xiàn)的相關方法,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下

this.value.skuStockList = [];
        let skuList = this.value.skuStockList;
        //只有一個屬性時
        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ù)據

假設選擇的商品屬性如下（可以根據需要調整）：

this.selectProductAttr = [
  { name: "顏色", values: ["紅色", "藍色"] },
  { name: "大小", values: ["S", "M"] },
  { name: "材質", values: ["棉", "羊毛"] }
];

初始化部分

首先，代碼初始化了一個空數(shù)組 skuStockList，并通過 skuList 引用指向該數(shù)組。

this.value.skuStockList = [];
let skuList = this.value.skuStockList;

這段代碼的目的是為后續(xù)生成的 SKU 列表提供一個存儲地方。

處理不同數(shù)量的屬性

接下來，代碼根據 this.selectProductAttr.length 的值判斷當前有多少個屬性被選擇。根據屬性的數(shù)量，代碼將生成不同數(shù)量的組合 SKU。

1. 只有一個屬性時

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

執(zhí)行過程：

只有一個屬性 "顏色"，其值為 ["紅色", "藍色"]。
對這個屬性的每一個值，生成一個 SKU 并推入 skuList。

結果：

[
  {"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"藍色\"}]"}
]

2. 有兩個屬性時

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; // 跳過當前循環(huán)，繼續(xù)處理下一個第一個屬性的值
    }
    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)
      });
    }
  }
}

執(zhí)行過程：

有兩個屬性 "顏色" 和 "大小"，其中 "顏色" 有 ["紅色", "藍色"]，"大小" 有 ["S", "M"]。
代碼會生成兩個屬性的所有組合。即，遍歷 "顏色" 的每一個值，并與 "大小" 的每個值進行配對。

結果：

[
  {"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"S\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"M\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"藍色\"},{\"key\":\"大小\",\"value\":\"S\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"藍色\"},{\"key\":\"大小\",\"value\":\"M\"}]"}
]

3. 有三個屬性時

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; // 跳過當前循環(huán)，繼續(xù)處理下一個第一個屬性的值
    }
    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; // 跳過當前循環(huán)，繼續(xù)處理下一個第二個屬性的值
      }
      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)
        });
      }
    }
  }
}

執(zhí)行過程：

有三個屬性 "顏色"、"大小" 和 "材質"，其值分別為：

"顏色"：["紅色", "藍色"]
"大小"：["S", "M"]
"材質"：["棉", "羊毛"]

代碼會生成三個屬性的所有組合。即，遍歷 "顏色" 的每一個值，和 "大小"、"材質" 的每個值進行配對。

結果：

[
  {"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材質\",\"value\":\"棉\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材質\",\"value\":\"羊毛\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材質\",\"value\":\"棉\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"紅色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材質\",\"value\":\"羊毛\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"藍色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材質\",\"value\":\"棉\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"藍色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材質\",\"value\":\"羊毛\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"藍色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材質\",\"value\":\"棉\"}]"},
  {"spData": "[{\"key\":\"顏色\",\"value\":\"藍色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材質\",\"value\":\"羊毛\"}]"}
]

總結

代碼根據選擇的商品屬性數(shù)量動態(tài)生成不同數(shù)量的 SKU 組合。
當屬性數(shù)量為 1 時，生成一個包含該屬性所有值的 SKU 列表。
當屬性數(shù)量為 2 時，生成包含這兩個屬性所有值的組合 SKU 列表。
當屬性數(shù)量為 3 時，生成包含三個屬性的所有組合 SKU 列表。
每一個 SKU 都是一個包含屬性名和值的 JSON 字符串，保存在 skuStockList 中。

通過這些步驟，代碼可以靈活地處理多屬性商品的不同組合，最終生成不同的 SKU 列表。

到此這篇關于vue前端sku實現(xiàn)的方法小結的文章就介紹到這了,更多相關vue sku內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

VUE+jszip如何實現(xiàn)下載多個文件導出為一個zip格式
這篇文章主要介紹了VUE+jszip如何實現(xiàn)下載多個文件導出為一個zip格式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue中路由跳轉的多種方式(和$router下路由跳轉的那幾個方法的區(qū)別)
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來實現(xiàn)路由跳轉,本文給大家分享vue中路由跳轉的幾種方式（和$router下路由跳轉的那幾個方法的區(qū)別）,感興趣的朋友一起看看吧
2023-11-11
詳解Vue的ref特性的使用
這篇文章主要介紹了詳解Vue的ref特性的使用,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-01-01
vue中實現(xiàn)先請求數(shù)據再渲染dom分享
下面小編就為大家分享一篇vue中實現(xiàn)先請求數(shù)據再渲染dom分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue ElementUI中el-table表格嵌套樣式問題小結
這篇文章主要介紹了Vue ElementUI中el-table表格嵌套樣式問題小結,兩個表格嵌套,當父表格有children數(shù)組時子表格才展示,對Vue ElementUI中el-table表格嵌套樣式問題感興趣的朋友跟隨小編一起看看吧
2024-02-02
深入理解Vue Computed計算屬性原理
Computed 計算屬性是 Vue 中常用的一個功能，本篇文章主要介紹了Vue Computed 計算屬性原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue項目啟動報錯解決方法大全
這篇文章主要給大家介紹了關于Vue項目啟動報錯解決方法的相關資料,文中通過圖文將解決的過程介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下
2023-07-07
vue實現(xiàn)圖片拖動排序
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片拖動排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
詳解Vue開發(fā)網站seo優(yōu)化方法
這篇文章主要介紹了Vue開發(fā)網站seo優(yōu)化方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-05-05
講解vue-router之什么是編程式路由
編程式路由在我們的項目使用過程中最常用的的方法了。這篇文章主要介紹了講解vue-router之什么是編程式路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05