vue商品sku属性选择（记录一次开发经验和思路）

需求：（部分打码）不能点击的按钮变灰色

目标：1.获取后台数据，添加状态,当前sku为选中状态，匹配组合表没有匹配则按钮为变灰色，每次点击计算出其他没有匹配上数据的变灰色，

数据：1.整一页面可选则数据(因为首次进来全部能点击), 2.匹配组合表 由数组和数组中string类型组成

思路：1.步匹配组合表 --用split分隔符 string 转数组

 此表记录所有能组合成类型的条目

2.把匹配组合变转换二维数组， [ [],[],[],[] ],  (匹配组合表,根据每一列组合成一个数组,)

            for (let key in this.SelectListData) {
                    for (let keys in this.SelectListData[key].arr) {
                        if (this.SelectListData[key].arr[keys] == ‘当前点了那个’) {
                            this.SelectListData[key].arr.forEach((v, i) => {
                                if (!this.arr[i].includes(v)) //去重加入
                                    this.arr[i].push(v)
                            })
                        }
                    }
                }

二次循环 为了找出刚刚用分隔符转换数组那个对象 ，而forEach能循环到第二个类push到第二个数组的方法

得出列结果，这个类别得出默认点击了第一个，其他子数组可选中(可以选中的正常黑色按钮)的情况, 因为点了第一行第一个 ,所以第一个子数组必须是只有一个，第二个子数组对应由原来的9项，减少至3项，后面子数组同样原理

3.把不能点击的变灰色 index表示当前按钮点的是第几行 比如第二个index 为1

             for (let key in this.ListData) {
                             if (key != index) {
                                 //1当前选择的区域不循环 
                                 this.ListData[key].values.forEach(v => {
                                         if (!this.arr[key].includes(v.id)) {
                                             v.showSelect = false
                                         } else {
                                             v.showSelect = true
                                         }
                                 })
                             }
                         }

 注意当前选中的类型，如果点了第二列的按钮，第二列的按钮不循环

现在就组合出 每次点击的时候对应哪些按钮没有命中匹配组合表,实现不能点击按钮变灰

-----下面说一下bug问题

目前基本实现效果了，但是发现有最后3个按钮只有一个item的情况下，点击了只有一个按钮的情况下，其他全部按钮会被激活成全部可点击的情况，当点击了被激活的按钮，后面计算就出现问题了

问题：仔细想出现这个bug的问题是正常情况，因为在匹配组合表中，每一条匹配数据都能出现，所以每次点了只有一个按钮的情况下会出现全部激活的情况

 解决方案：在第二步查询的结果之前计算调整不要进行计算，点击之后出现全部的按钮数组和第一次进入的数组是同样的，因为第一次进去全部按钮是正常，都是可点击状态(判断2个数组是否相同 我是用的先把id从小到大排序，转为string类型进行排序)

备注：此方法用于解决商品sku属性选择方法的思路，