处理二维数组循环渲染el-select并进行数据组合,并对已选的组合进行禁选

[[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
        },

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值