現有需求，當點擊顏色時進行校驗，若藍色6.0寸無庫存時禁選。 先上效果截圖：

當前規格組合中 藍色6寸 和 黑色中6寸 的庫存均為0.

后臺返回數據如下圖：

實現思路： 例如：當選擇藍色時，進行循環遍歷組合。組合結果為: 藍黑，藍5.5寸，藍6.0寸，再進行校驗，拿出對應組合的庫存，判斷庫存為0時禁選

第一步： 對當前顯示在頁面上的spu進行重新組合

this.goodsInfo.skuSpec.forEach(it => { // 重新組合skuit.goodsSpecVals.forEach(i => {this.$set(i, 'children', [])this.goodsInfo.skuList.forEach(item => {if (item.skuName.includes(i.goodsSkuSpecValName)) {i.children.push(item.skuName)}})})})解析：sku組合中含有spu，就將將該條sku信息拼入spu對象里，鍵為children 如圖： 復制代碼

第二步： 此時已經循環展示在頁面上了，要做的是點擊進行處理, 此處it為當前的goodsSpecVals中的一項，index為skuSpec層中的索引，idx為當前goodsSpecVals的索引

chooseSku(it, index, idx) {if (it.stock === 0) return // 判斷庫存為0時返回// 選中的規格數組組成:[藍色，5.5寸]if (this.selectArr[index] === it.goodsSkuSpecValName) {// 再次點擊時取消選中this.$set(this.selectArr, index, '')this.formData.skuId = '' // 清空將要傳給后臺的skuId} else this.$set(this.selectArr, index, it.goodsSkuSpecValName)if (this.selectArr.length === this.goodsInfo.skuSpec.length) {// 選取了所有的規格時 拿去skuIdlet str = ''this.selectArr.forEach(item => {str += '_' + item})str = str.slice(1)// 所有規格都選了時，進行匹配skuId，此處數據用于傳給后臺this.goodsInfo.skuList.forEach(item => { // 匹配skuIdif (item.skuName === str) this.formData.skuId = item.id})}this.getData(this.selectArr, this.goodsInfo.skuSpec, this.goodsInfo.skuList) // 校驗庫存 } 復制代碼

第三步： 進行循環判斷哪些sku組合庫存為空

getData(selectArr, skuSpec, skuList) {console.log(skuSpec)let checkLen = skuSpec.length - 1 // 3行規格 選2行時校驗，2行規格，選1行時校驗if (selectArr < checkLen) returnskuSpec.forEach((item, index) => {item.goodsSpecVals.forEach((it, idx) => {let c = this._deepCopy(selectArr)// 這里進行循環組合， 例如：紅色_5.5寸，紅色_6.0寸c[index] = it.goodsSkuSpecValName// 拿到我們想要的sku組合，例如：紅色_5.5寸 let skuName = this.getCid(c, skuSpec, skuList)console.log(skuName, 'skuNameskuNameskuName')// 根據我們拿到的sku組合 紅色_5.5寸進行查庫存let stock = this.getStock(skuName, skuSpec, skuList)it.stock = stock})}) } 復制代碼

第四步 拿出我們需要的組合類型

getCid(c, skuSpec, skuList) {// 首先進行判斷，避免單純的紅色，藍色也進行循環。if (c.length !== skuSpec.length) returnlet cStr = c.join('_')// 對后臺傳來的sku組合進行循環遍歷,若匹配上，則返回這個組合的skuName，例如：紅色_5.5寸 for (let i in skuList) {if (skuList[i].skuName === cStr) {return skuList[i].skuName}} } 復制代碼

第五步 根據我們拿到的組合進行查詢庫存

getStock(skuName, skuSpec, skuList) {console.log(skuName, 'skuName')if (!skuName) returnfor (let a in skuSpec) { // 我們拼接的數組，見第三張圖for (let b in skuSpec[a].goodsSpecVals) {// 對每項Spu中children進行循環，若此children中包含skuName，則返回當前組合的庫存到當前Spu中// 例如點擊紅色時，遍歷匹配到紅色_5.5寸，紅色庫存則為紅色_5.5寸的庫存 300,5.5寸此時庫存也為300。以此類推可以得出6.0寸的庫存。if (skuSpec[a].goodsSpecVals[b].children.indexOf(skuName) !== -1) {for (let i in skuList) {if (skuList[i].skuName === skuName) {console.log(skuList[i], 'skusku')return skuList[i].stock}}}}}console.log(skuSpec, 'skuSpecskuSpec') } 復制代碼

第六步 最后就比較簡單了，在頁面上我們循環判斷下當前的庫存是否為0就OK啦

文章的最后

初次寫文章，請多多包涵，有不明白的歡迎留言指出(ps:掘金都是大神，不允許看不懂的情況，手動滑稽) 此方法完全還可以繼續優化，也歡迎提出共同學習啊~ 如果有其他方法也歡迎分享

轉載于:https://juejin.im/post/5c0e312ae51d4534655d937c

總結

以上是生活随笔為你收集整理的基于Vue的淘宝SKU组合算法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。