使用vue实现前端sku选择

使用vue实现前端sku选择

技术杂谈小彩虹2021-07-16 6:37:1640A+A-

前言

最近公司项目需要开发一个积分商城,里面涉及到sku库存选择,本以为不是很难,结果开发中却遇到很大问题,现将实现逻辑记录下来,思路不一定是最好的,但也不失为一种解决方法,供其他小伙伴借鉴。有更优的方案的可以留言一起讨论学习下。

什么是sku

sku:库存保有单位即库存进出计量的单位, 可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态,不同管理模式来处理。在服装、鞋类商品中使用最多最普遍。

最后实现的效果

总体实现思路

  1. 接口获取现有库存列表以及sku规格属性列表(坑:库存可能存在某个商品规格没有,所以最全的规格属性应该是接口获取的,而不是渲染库存得到的)
  2. sku规格属性列表与库存列表对比,将没有库存的选项置灰
  3. 点击某一个具体的属性,将其置为已选状态或取消已选状态
  4. 循环规格属性列表,将disabled置为true,然后拿所有规格属性的每一项分别与已选中的数据的每一项,组成一个新的比较项,与现有库存比较,找到存在的可点项,将可点击项置disable置为false

文字描述太枯燥,举个栗子填肚子:

为了方便后续描述,我们先记住三个数据:1.库存列表,2.规格属性列表,3.选中列表。

假设现有 1.库存列表为:

[
    "小,绿,one",
    "小,绿,two",
    "小,绿,three",
    "中,绿,one",
    "中,绿,two",
    "中,绿,three",
    "大,绿,two",
    "大,绿,three",
    "大,橙,three"
]

2.规格属性列表

[
    {
      "id": "547f76222d4d4f92a49de2e0bf6bd7ef",
      "type": 1,
      "name": "颜色",
      "propertyList": [
        {
          "id": "8ed34030c93c4dc29e43edb95e6cfca2",
          "property": 1,
          "name": "橙色"
        },
        {
          "id": "c80cbe4c6cbf49f5b2822331768cd422",
          "property": 2,
          "name": "绿色"
        }
      ]
    },
    {
      "id": "21967fba6b574b479974e50720ad25fe",
      "type": 2,
      "name": "测试类别",
      "propertyList": [
        {
          "id": "f40c3884e5e9422c973d31631a65ae64",
          "property": 1,
          "name": "小"
        },
        {
          "id": "edac997ed2c54e41b1f3076fbd6e19f9",
          "property": 2,
          "name": "中"
        },
        {
          "id": "408fb530344a4a41b33932431638dcbb",
          "property": 3,
          "name": "大"
        }
      ]
    },
    {
      "id": "fe7f49a798794670be622e6b9d2f386a",
      "type": 3,
      "name": "tester",
      "propertyList": [
        {
          "id": "c76dc797eaae4d8eb360de8811a9ec7a",
          "property": 1,
          "name": "one"
        },
        {
          "id": "02808ac287e8410f936a90167d82ee2b",
          "property": 2,
          "name": "two"
        },
        {
          "id": "d5660085ff8743d999f6ed3a497ec8b7",
          "property": 3,
          "name": "three"
        }
      ]
    }
  ]

3.已选数组

渲染后界面见上面动图。

当点击颜色中的‘橙’后,橙色变为选中状态,此时,循环规格属性列表的每一项与已选的‘橙’组合成一个新的数据,先将当前循环项的disable设置为true,然后去跟现有库存列表做比较,若存在该组合,则将当前循环的属性的disable设置为false。在循环的时候遇到选中项中包含同一个组的数据,则用当前循环属性替换已选数组中的同一组数据后,拿新的数据去对比库存,然后再设置disable的值。

现在已选的数组是['橙'],循环规格属性列表['橙','绿', '小', '中', '大','one', 'two','three'],第一个'橙'跟已选数组的'橙'属于同一个组,所以替换已选数组的'橙'后组成新的数组还是['橙'],拿新的数组['橙']去库存列表查找是否有'橙'存在,库存中有橙,所以‘橙’可点击;接下来是第二个'绿','绿'跟已选数组中的'橙'也是同一组,按照上面逻辑,替换后新的数组是['绿'],拿['绿']去库存中查,也存在该项,所以'绿'也可点击;第三项'小'跟已选数组的'橙'组成新数组['小','橙'],新数组['小','橙']去库存查找,发现不存在该组合,即没有库存对应,所以此时的'小'的disable设置为了true,不可点击了;剩下的以此类推...

项目整理后的代码

布局样式

<template>
  <div>
    <div class="content fix-header fix-bottom">
      <!--      弹出层 选择商品规格-->
      <div class="mask">
        <div class="mask-content">
          <div class="mask-title">
            <div class="mask-close iconfont-shop icon-close"></div>
            选择规格参数
          </div>
          <div class="spec-items">
            <div class="spec-menu-item js-spec-menu" v-for="(item, index) in goodsTypeList" :key="item.id">
              <div class="spec-note">{{item.name}}</div>
              <div class="spec-choices">
                <span v-for="(el, i) in item.propertyList"
                      :key="el.id"
                      :class="{'active' : el.selected, 'disabled': el.disabled}"
                      @click="handleClickSpecs1(item.id, el.id, el, index, i)"
                >{{el.name}}</span>
              </div>
            </div>
            <div class="spec-menu-item">
              <div class="spec-note">数量</div>
              <div class="spec-num">
                <span class="minus">-</span>
                <input type="number" v-model="buyNumber" maxlength="3"/>
                <span class="add">+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

逻辑处理

<script>
  let orgdata = {
    "skus": [
      {
        "id": "f5eee18b8d5b4fc2b46a56e92abdb525",
        "stockAmmount": 7,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "74fe546803e44a7c95bebfe56a29952d",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "f40c3884e5e9422c973d31631a65ae64",
            "propertyName": "小",
            "property": 1
          },
          {
            "id": "78f98ee53ae549ceb2c18629152ff849",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "02808ac287e8410f936a90167d82ee2b",
            "propertyName": "two",
            "property": 2
          },
          {
            "id": "91cefe600f40498bb5013deebb9c27be",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "383feb7947f14ce5b832bc8700e65c9e",
        "stockAmmount": 2,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "1beed60c2eb244f89ad82806d343d468",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "02808ac287e8410f936a90167d82ee2b",
            "propertyName": "two",
            "property": 2
          },
          {
            "id": "357fd7db1f5244e5b64f48a34bb581fa",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "edac997ed2c54e41b1f3076fbd6e19f9",
            "propertyName": "中",
            "property": 2
          },
          {
            "id": "5c29a251e55a4b678fc4f8287cc560b5",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "905b10e1740e4be992d14cfc23a887a2",
        "stockAmmount": 4,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "0a5f93d9ef1c486ba369dcb1fbd3aed9",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "c76dc797eaae4d8eb360de8811a9ec7a",
            "propertyName": "one",
            "property": 1
          },
          {
            "id": "d920730c34644218b3d0bbc5fca5edf4",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "f40c3884e5e9422c973d31631a65ae64",
            "propertyName": "小",
            "property": 1
          },
          {
            "id": "2afbe8a77d034de0a1655f9ad1a25b95",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "a440b0084e564d3e9d7c8b445bb7645e",
        "stockAmmount": 10,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "12a4715b6730438888e88f302871245a",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "f40c3884e5e9422c973d31631a65ae64",
            "propertyName": "小",
            "property": 1
          },
          {
            "id": "9063e1f1586f4a74b2f614039e8743c4",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "ae38b9cf56d5408a809d6fbd1b902ee5",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "9961364cc3494823aaf7699733393335",
        "stockAmmount": 15,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "3335920f79914cfb8a39ae22b0802bc0",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "c76dc797eaae4d8eb360de8811a9ec7a",
            "propertyName": "one",
            "property": 1
          },
          {
            "id": "34950de7059d4fffac485abb59a79381",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "edac997ed2c54e41b1f3076fbd6e19f9",
            "propertyName": "中",
            "property": 2
          },
          {
            "id": "a82ff8d74d3d4a1ea454e4870cc68b64",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "bd3aeb3c7c854a80b88e7f82a5a78a1e",
        "stockAmmount": 8,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "4fc8e61aa192463085578de92974b18b",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "edac997ed2c54e41b1f3076fbd6e19f9",
            "propertyName": "中",
            "property": 2
          },
          {
            "id": "884f32b64a4b478bb01f93b40dfeb6fc",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "f66109eccd934529a18026376fccfa7b",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "5e094973bbaf41ce81b7b626174b0bbf",
        "stockAmmount": 8,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "23d688678aaa42eebd3c04cceaa61bac",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "8ed34030c93c4dc29e43edb95e6cfca2",
            "propertyName": "橙色",
            "property": 1
          },
          {
            "id": "55649f0753464921b68b0017ce0010d7",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "408fb530344a4a41b33932431638dcbb",
            "propertyName": "大",
            "property": 3
          },
          {
            "id": "d7248b12b7e847ca9be024ed3bb6d101",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "60ce0a1f99e940dc82d041d36681111b",
        "stockAmmount": 9,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "91faddf91e944cabadbda5c342430139",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "207698d97e4247bb9747843d16e25750",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "408fb530344a4a41b33932431638dcbb",
            "propertyName": "大",
            "property": 3
          },
          {
            "id": "3c69d3c73aa24cccbacaf805d71117fd",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "f3c805d1959d413a86679955ae047ec5",
        "stockAmmount": 10,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "00113d4b6046411cb8ff935b2743904b",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "tester",
            "type": 3,
            "propertyId": "02808ac287e8410f936a90167d82ee2b",
            "propertyName": "two",
            "property": 2
          },
          {
            "id": "c13d8a4c7a18477fbe7027044d0393a0",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "653d0e243bab45eaa5c83dc8206ee33e",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "测试类别",
            "type": 2,
            "propertyId": "408fb530344a4a41b33932431638dcbb",
            "propertyName": "大",
            "property": 3
          }
        ]
      }
    ]
  };
  let goodType = [
    {
      "id": "547f76222d4d4f92a49de2e0bf6bd7ef",
      "type": 1,
      "name": "颜色",
      "propertyList": [
        {
          "id": "8ed34030c93c4dc29e43edb95e6cfca2",
          "property": 1,
          "name": "橙色"
        },
        {
          "id": "c80cbe4c6cbf49f5b2822331768cd422",
          "property": 2,
          "name": "绿色"
        }
      ]
    },
    {
      "id": "21967fba6b574b479974e50720ad25fe",
      "type": 2,
      "name": "测试类别",
      "propertyList": [
        {
          "id": "f40c3884e5e9422c973d31631a65ae64",
          "property": 1,
          "name": "小"
        },
        {
          "id": "edac997ed2c54e41b1f3076fbd6e19f9",
          "property": 2,
          "name": "中"
        },
        {
          "id": "408fb530344a4a41b33932431638dcbb",
          "property": 3,
          "name": "大"
        }
      ]
    },
    {
      "id": "fe7f49a798794670be622e6b9d2f386a",
      "type": 3,
      "name": "tester",
      "propertyList": [
        {
          "id": "c76dc797eaae4d8eb360de8811a9ec7a",
          "property": 1,
          "name": "one"
        },
        {
          "id": "02808ac287e8410f936a90167d82ee2b",
          "property": 2,
          "name": "two"
        },
        {
          "id": "d5660085ff8743d999f6ed3a497ec8b7",
          "property": 3,
          "name": "three"
        }
      ]
    }
  ]

  export default {
    name: "Detail",
    data() {
      return {
        maskVisible: true,
        skuList: [],
        lastCheckedSku: {}, // 选中的sku信息
        buyNumber: 1, // 购买数量
        sku: null,
        currentSkuList: [],
        valueIdSortAndIndex: [],
        goodsTypeList: [],
        selectItemList: []
      }
    },
    mounted() {
      this.init();
      // 获取所有的规格
      this.getShopGoodsType()
      this.initGoodType()
    },
    methods: {
      init() {
        let valueIdSortAndIndex = [];
        let currentSkuList = orgdata.skus.map((item,index) => {
          let valueIdSort = [];
          item.skusTypes.map(skusTypesItem=>{
            valueIdSort.push(skusTypesItem.propertyId)
          });
          /*
           将sku规格值的ID,即 propertyId,组成一个数组并且字典排序,以及将该sku所对应的index存入数组,供点击后查询sku*/
          valueIdSortAndIndex.push({valueIdSort: valueIdSort.sort()})
          return item.skusTypes
        });

        this.$set(this.$data, 'currentSkuList', currentSkuList);
        this.$set(this.$data, 'valueIdSortAndIndex', valueIdSortAndIndex);
      
      },
      
      isContained(aa, bb) {
        //判断aa数组是否 全 包含bb数组
        if(!(aa instanceof Array)
            ||!(bb instanceof Array)
            ||(aa.length<bb.length)
        ){
          return false;
        }
        let aaStr = aa.toString();
        for(var i=0;i<bb.length;i++){
          if(aaStr.indexOf(bb[i])<0){
            return false;
          }
        }
        return true;
      },
      // 获取所有的规格
      getShopGoodsType() {
        // goodType 为接口返回数据
        goodType.forEach(items=>{
          items.propertyList.forEach(item=>{
            item.selected = false;
            item.disabled = true;
          })
        })
        this.goodsTypeList = goodType;
      },
      // 初始化 判断 是否有库存
      initGoodType(){
        let currentSkuList = this.currentSkuList.flat(Infinity);
        this.goodsTypeList.forEach(items=>{
          items.propertyList.forEach(item=>{
            for(var i=0; i<currentSkuList.length; i++){
              if (item.id == currentSkuList[i].propertyId) {
                item.disabled = false;
                break;
              }
            }
          })
        })
      },
      // 选择每个规格,判断对应的库存
      handleClickSpecs1(grounpId, id, el, index, i){
        let selectItemList = this.selectItemList; // 已选规格

        if (el.disabled) {
          return;
        }
        // 处理selected的逻辑
        if (!el.selected) {
          this.goodsTypeList[index].propertyList.forEach(item=>{
            item.selected = false;
          })
          this.goodsTypeList[index].propertyList[i].selected = true;
          // 选中项中有同组元素,替换
          selectItemList.forEach((item, x_selected_index) => {
            if (item.index === index) {
              selectItemList.splice(x_selected_index, 1)
            }
          });
          selectItemList.push({grounpId, id, index, i});
        } else  {
          // 取消选中并删除选中项中数据
          this.goodsTypeList[index].propertyList[i].selected = false;
          selectItemList.forEach((item, x_selected_index) => {
            if (item.id === id && item.grounpId === grounpId) {
              selectItemList.splice(x_selected_index, 1);
            }
          });
        }
        this.$set(this.$data, 'selectItemList', selectItemList)

        // 取出组ID
        let x_selected_grounpIds = [];
        selectItemList.forEach(item=>{
          x_selected_grounpIds.push(item.grounpId);
        });

        // 处理disabled的逻辑
        if (selectItemList.length == 0) {
          // 选中属性为空,重新初始化数据
          this.initGoodType();
        } else {
          //拿所有规格属性(即goodsTypeList)的每一项分别与已选中的数据(即selectItemList)的每一项,组成一个比较项,与现有库存比较,找到存在的可点项

          this.goodsTypeList.forEach((goodsType,goodsTypeIndex)=>{
            goodsType.propertyList.forEach((prop, propIndex)=>{
              if (!prop.selected) {
                prop.disabled = true;
              }
              // 本次循环数据
              let push_data = {grounpId: goodsType.id, id: prop.id, index: goodsTypeIndex, i: propIndex}
              if (x_selected_grounpIds.indexOf(goodsType.id) > -1 ){
                // 当前循环的规格的组ID在已选规格中,删除同组规格,用当前规格替换后去与库存比较
                let sel = selectItemList.slice(); // 用一个新变量接受数据,防止修改源数据
                let index_splice = x_selected_grounpIds.indexOf(goodsType.id);
                sel.splice(index_splice, 1, push_data);
                this.optionsHandle(sel, push_data)
              } else {
              //  当前循环规格组ID不在已选规格中,添加当前规格到复制出来的已选数组中,循环比较
                let sel = selectItemList.slice();
                sel.push(push_data);
                this.optionsHandle(sel, push_data)
              }
            })
          })
        }
      },
      optionsHandle(selArr, push_data){
        let propertyIds = []
        // 将当前比较项的属性ID提取
        selArr.map(item=>{
          propertyIds.push(item.id)
        });
        // 在现有库存中查找是否有可选项,可选的置为可点击
        this.valueIdSortAndIndex.map(item=>{
          if (this.isContained(item.valueIdSort, propertyIds)){
            this.goodsTypeList[push_data.index].propertyList[push_data.i].disabled = false;
          }
        });
      }
    }
  };
</script>

总结

遇到问题还是需要多沟通,沟通中自然就茅塞顿开了。欢迎大家留言区写下更好的解决方案。521哦

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们