一袖迎、效果圖：

無庫存置灰不可選

二王污、使用：

頁面使用組件：

<!-- 規(guī)格 -->
<view class="specification">
    <view class="title">選擇規(guī)格</view>
    <commodity-sku skuNameArr="{{detailData.specList}}" skuInfoArr="{{detailData.specInfo}}"
        bind:getResultObj="getResultObj">
    </commodity-sku>
</view>

記得注冊組件：

{
  "usingComponents": {
    "commodity-sku": "/components/commodity-sku/commodity-sku"
  }
}

三、完整組件：

commodity-sku.wxml

<!-- sku組件 -->
<view class="container">
  <view class="sku-item" wx:for="{{skuNameArr}}" wx:for-item="item" wx:key="index">
    <view class='spec-name'>{{item.specName}}</view>
    <view class="spec-right">
      <view wx:for="{{item.attrList}}" wx:for-item="subItem" wx:for-index='subIndex' wx:key="subIndex"
        bindtap="changeItem" data-show="{{subItem.isShow}}"
        class="{{subItem.isShow?'':'no-active'}} {{subIndexArr[index] == subIndex?'active':''}}"
        data-ol="{{subIndex[index]}}" data-name="{{subItem.attrName}}" data-index="{{index}}"
        data-subindex="{{subIndex}}">{{subItem.attrName}}
        <!-- 勾選的圖片沒有可以不要 -->
        <image class="tags-img" wx:if="{{subIndexArr[index] == subIndex}}" src="/mall-pages/images/commodity/sel.png" />
      </view>
    </view>
  </view>
  <view wx:if="{{resultObj.price}}">該組合價格為 {{resultObj.price}} </view>
</view>

commodity-sku.js

page({
  properties: {
    // 規(guī)格名稱數組
    skuNameArr: {
      type: Array,
      value: []
    },
    // 規(guī)格匹配信息
    skuInfoArr: {
      type: Array,
      value: []
    }
  },
  data: {
    //存放被選中的值
    selectArr: [],
    //存放要和選中的值進行匹配的數據
    selItemObj: {},
    //是否選中 因為不確定是多規(guī)格還是但規(guī)格曲掰，所以這里定義數組來判斷
    subIndexArr: [],
    //最終匹配到的規(guī)格信息結果
    resultObj: {},
  },
  methods: {
    // 切換規(guī)格
    changeItem(e) {
      var index = e.currentTarget.dataset.index
      var subindex = e.currentTarget.dataset.subindex
      var item = e.currentTarget.dataset.name
      var selectArr = this.data.selectArr
      var subIndexArr = this.data.subIndexArr
      var selItemObj = this.data.selItemObj
      if (selectArr[index] != item) {
        selectArr[index] = item;
        subIndexArr[index] = subindex;
      } else {
        //去掉選中的顏色
        // this.selectArr[index] = "";
        // this.subIndexArr[index] = -1;
      }
      this.filterSkuNameArr();
      var obj = selItemObj[selectArr];
      this.setData({
        selectArr: selectArr,
        subIndexArr: subIndexArr,
        resultObj: obj,
        selItemObj: selItemObj
      })
      console.log(obj)
      this.triggerEvent('getResultObj', obj)
    },
    // 過濾每一組是否可選 isShow
    filterSkuNameArr() {
      var self = this;
      var arr = self.data.skuNameArr;
      var result = []; //定義數組存儲被選中的值
      for (var i in arr) {
        result[i] = self.data.selectArr[i] ? self.data.selectArr[i] : "";
      }
      for (var i in arr) {
        var last = result[i]; //把選中的值存放到字符串last去
        for (var j in arr[i].attrList) {
          result[i] = arr[i].attrList[j].attrName; //賦值垃杖，存在直接覆蓋，不存在往里面添加name值
          arr[i].attrList[j].isShow = self.isMay(result); //在數據里面添加字段isShow來判斷是否可以選擇
        }
        result[i] = last; //還原找前，目的是記錄點下去那個值糟袁，避免下一次執(zhí)行循環(huán)時避免被覆蓋
      }
      self.setData({
        skuNameArr: arr
      })
      console.log(arr);
    },
    // 判斷是否可選 
    isMay(result) {
      for (var i in result) {
        if (result[i] == "") {
          //如果數組里有為空的值，那直接返回true
          return true;
        }
      }
      //匹配選中的數據的庫存躺盛，若不為空返回true反之返回false
      return !this.data.selItemObj[result] ? false : this.data.selItemObj[result].stockNum == 0 ? false : true;
    },
  },
  lifetimes: {
    ready() {
      console.log(this.data.skuNameArr);
      console.log(this.data.skuInfoArr);
      var skuInfoArr = this.data.skuInfoArr
      var selItemObj = this.data.selItemObj
      var skuNameArr = this.data.skuNameArr
      for (var i in skuInfoArr) {
        //修改數據結構格式项戴，改成鍵值對的方式，以方便和選中之后的值進行匹配
        selItemObj[skuInfoArr[i].wholeSpecName] = skuInfoArr[i];
      }
      for (var i = 0; i < skuNameArr.length; i++) {
        for (var o = 0; o < skuNameArr[i].attrList.length; o++) {
          skuNameArr[i].attrList[o].isShow = true
        }
      }
      this.setData({
        skuInfoArr: skuInfoArr,
        selItemObj: selItemObj,
        skuNameArr: skuNameArr
      })
    }
  }
})

commodity-sku.wxss

.sku-item {
    margin-top: 30rpx;
    display: flex;
}

.spec-name {
    position: relative;
    top: 15rpx;
    width: 22%;
    font-size: 24rpx;
    font-weight: 600;
    word-break: break-all;
}

.spec-right view {
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    padding: 0 16rpx;
    line-height: 60rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    border: 2rpx solid #DDDDDD;
    display: inline-block;
    font-size: 24rpx;
    -webkit-border-radius: 8rpx;
    -moz-border-radius: 8rpx;
    -ms-border-radius: 8rpx;
    -o-border-radius: 8rpx;
    position: relative;
    overflow: hidden;
    word-break: break-all;
    min-height: 42rpx;
}

.spec-right .active {
    background: #FFF7F0;
    border: 2rpx solid #FF6526;
}

.spec-right .no-active {
    color: #9DA0A6;
    pointer-events: none;
}
.tags-img {
    position: absolute;
    width: 26rpx;
    height: 20rpx;
    right: -4rpx;
    bottom: 0;
}