最近在做的项目商城有这个需求,一开始用普通的组合遍历法总觉得哪里不对,于是善用搜索找到了我觉得挺清晰的算法。
假设只有 5.0寸-红-64G可选,那么当我选择的选项是5.0寸-红时,应当只有64G可以点击,其他按钮均不可点击,怎么实现呢?
具体思路是:
1:先根据有库存的skulist算出所有有可能的组合U
2:再根据选择的选项去匹配是否在组合U里
3:根据匹配的值,来判断按钮是否可以点击,不可点击则置灰
作者讲的很明白,我就不一一赘述,参考地址放在最下面了
下面直接上前端代码
watch: {
initSpecList(newVal, oldVal) {
var self = this
this.specList = newVal
if (this.skuList.length > 0) {
this.selected = JSON.parse(JSON.stringify(this.skuList[0].specAttr)) //初始化选择值这里我选的是skulist里的第一条
this.operations = [[]]
//计算幂集
this.skuList.forEach((item, key) => {
let arr = []
let ps = [[]]
item.specAttr.forEach((child, idx) => {
arr[idx] = child.specAttrId
})
for (let i = 0; i < arr.length; i++) {
for (var j = 0, len = ps.length; j < len; j++) {
ps.push(ps[j].concat(arr[i]))
self.operations.push(ps[j].concat(arr[i]))
}
}
})
this.computeHandler()
}
}
},
//计算最终选择的数组
computeHandler() {
var self = this
self.specList.forEach((spec) => {
spec.specAttrList.forEach((attr) => {
let canChoose = [] // 当前按钮所匹配的元素数组
self.selected.forEach((selectItem) => {
if (spec.specId != selectItem.specId && selectItem.specAttrId) {
canChoose.push(selectItem.specAttrId) //非同级元素可组合
}
})
canChoose.push(attr.specAttrId)
//已组合好元素,去匹配幂集
attr.disabled = true
for (let item of self.operations) {
canChoose.sort((a, b) => {
return a - b
})
item.sort((a, b) => {
return a - b
})
if (canChoose.toString() == Array.from(item).toString()) {
attr.disabled = false
break; //匹配到按钮可点
}
}
})
})
},
参考地址:
https://www.jianshu.com/p/4a563212f431