[[1,2,3],[4,5,6],[7,8,9]]
由这样的数据渲染el-select二维数组内的每个数组拿一个值组合数据,组合的数据不能出现重复
最后组成[[1,4,7],[1,4,8],[2,3,7]]
vue页面
<div
v-for="(item, index) in row.goodsSkurelationInfos"
:key="index + 'sku'"
class="flex-row-normal-normal flex-wrap mb-6 source-product-sku"
>
<div v-if="item.onlinekey">
<el-select
:value="item.skuShowName.split('|')[idx]"
v-for="(val, idx) in filterSpecNameInfos(item.onlinekey)"
:key="idx + 'data'"
class="m-2 wSize-m el-form-item"
:class="[{ 'is-error': !item.skuShowName.split('|')[idx] }]"
size="mini"
@change="v => sourceGoodsSkuAttributes(v, idx, item.skuShowName, item.onlinekey, index, row)"
>
<!-- :disabled="judgeSourceSkuRepeated(index, val, idx, item.onlinekey, row)" -->
<el-option
v-for="(v, i) in val"
:label="v"
:value="v"
:key="i"
:disabled="judgeSourceSkuRepeated(index, val, v, idx, item.onlinekey, row)"
></el-option>
</el-select>
</div>
<div v-else>
<el-select class="m-2 wSize-m" size="mini"></el-select>
</div>
</div>
//SKU列表内的sku属性
filterSpecNameInfos(onlinekey) {
let data = this.goodsProviderInfo
.filter(v => {
return v.onlinekey === onlinekey
})[0]
?.specNameInfos.map(v => {
return v.childValue
})
return data
},
//判断商品货源SKU是否重复
judgeSourceSkuRepeated(index, val, v, idx, onlinekey, row) {
let skuShowNameList = row.goodsSkurelationInfos[index].skuShowName.split('|')
//已使用的sku组合
let selectedValues = row.goodsSkurelationInfos
.filter(item => {
return item.onlinekey === onlinekey
})
?.map(item => {
return item.skuShowName.split('|')
})
//全部的sku组合
let totalPermutation = this.getCombinations(this.filterSpecNameInfos(onlinekey))
//剩余可用的sku组合
let optionalSkuCombination = _.differenceWith(totalPermutation, selectedValues, _.isEqual)
//是否选择完整
if (this.filterSpecNameInfos(onlinekey).length > skuShowNameList.filter(item => !!item).length) {
//当前可选择的sku组合
let optionalCombination = this.findMatchingElements(optionalSkuCombination, skuShowNameList)
//可选值数据
let optionalValue = optionalCombination.map(item => item[idx])
return !optionalValue.includes(v)
} else {
//当前可选择的sku组合
skuShowNameList.splice(idx, 1, '')
let optionalCombination = this.findMatchingElements(optionalSkuCombination, skuShowNameList)
//可选值数据
let optionalValue = optionalCombination.map(item => item[idx])
return !optionalValue.includes(v)
}
},
getCombinations(arrays) {
// 递归结束条件:当只剩下一个数组时,直接返回该数组的每个元素作为初始排列组合
if (arrays.length === 1) {
return arrays[0].map(item => [item])
}
// 递归取得除了第一个数组之外的剩余数组的排列组合
const remainingCombinations = this.getCombinations(arrays.slice(1))
// 对第一个数组的每个元素,与剩余数组的排列组合进行组合
const combinations = []
arrays[0].forEach(item => {
remainingCombinations.forEach(combination => {
combinations.push([item, ...combination])
})
})
return combinations
},
findMatchingElements(data, target) {
if (target.filter(item => !!item).length === 0) {
return data
}
const matchingElements = data.filter(sublist => {
return sublist.every((value, index) => {
return target[index] === '' || target[index] === undefined || value === target[index]
})
})
return matchingElements
},