SKU_库存

先上一个示意图

1.先说一下思路：

每次选择条件时，捞出库存不为0的值，将其属性组成一个集合，非选择项的每一个属性值看是否存在于这个集合，是就可选，不是则不可选。 就是这么简单。

        直接撸代码吧。

<template>
    <div class="sku">
        <div v-for="(key,index) in keys">
            <div class="tabContent">
                {{key.name}}:
                <input type="button"   @click="itemSelect(index,i,item)" v-for="(item, i) in key.items" :class="{block: !item.block, active: item.active, 'sku':true}" v-model="item.value" />
            </div>
        </div>
    </div>
</template>

data 里面的数据

data() {
    return{
         //有库存数据
        sku_list:  [
            {'attrs':'10,20,30,40','num':120},
            {'attrs':'10,21,30,40','num':10},
            {'attrs':'10,22,30,40','num':28},
            {'attrs':'10,22,31,41','num':220},
            {'attrs':'10,22,32,40','num':130},
            {'attrs':'11,23,32,41','num':120},
        ],
         keys: [
                {
                    name: '颜色',
                    items: [{
                        value: '9', active: false ,block:false           
                    },{
                        value: '10',active: false ,block:false    
                    },{
                        value: '11',active: false   ,block:false  
                    }]
                },
                {
                    name: '大小',
                    items: [{
                        value: '20',active: false  ,block:false   
                    },{
                        value: '21',active: false   ,block:false  
                    },{
                        value: '22',active: false  ,block:false   
                    },{
                        value: '23',active: false   ,block:false  
                    }]
                },{
                    name: '尺寸',
                     items: [{
                        value: '30',active: false  ,block:false   
                    },{
                        value: '31',active: false   ,block:false  
                    },{
                        value: '32',active: false   ,block:false  
                    }]
                },
                {
                    name: '年龄',
                    items: [{
                        value: '40',active: false   ,block:false  
                    },{
                        value: '41',active: false   ,block:false  
                    }]
                }
            ],
             select: [], 
    }
}

方法：

//组建 存在库存 的集合
pros_in_skulist(arr = this.sku_list) {
    let pro_all_in = [];
    arr.forEach(item =>{              
        pro_all_in = pro_all_in.concat(item['attrs'].split(','))
    });
    return pro_all_in
}

主体部分

created() {
    //初始化数据 库存为0的选项不可选
    this.keys.forEach(item => {
        for(let key in item ) {
            item.items.forEach(i => {
                if(this.pros_in_skulist().includes(i['value'])) {
                    i.block = true;
                }else{
                    i.block = false;
                };
            })
        }
    });
},

//点击筛选条件
itemSelect(index, count, scope) {  
    //添加条件属性
    this.select[index] = (this.select[index] && scope.value === this.select[index]) ? '': scope.value;
    // 点击背景高亮
    this.keys[index]['items'][count]['active'] = this.select[index] == this.keys[index]['items'][count]['value']? true: false;
    this.keys[index]['items'].forEach((v, i) => {
        if(i != count) {
            v.active = false;
        }
    })   
    //选择条件之后筛选出 库存不为0的库存
    let pros_in = []
    this.sku_list.forEach( v => {
        if(
            this.select.every(function(vm) {
            <!--此处考虑到取消选择 值为空的情况-->
                if(vm) {
                    return v['attrs'].split(',').includes(vm)
                }else{
                    return true
                }
            })
        ) {
            pros_in.push(v)
        }
    })
    //记录选择的条件位置
    let ARRINDEX = [];
    this.select.forEach((VAL, INDEX) => {
        if(VAL) {
            ARRINDEX.push(INDEX)
        }
    });
    //拿未选择条件项的属性 去存在库存集合去对比，
    let pros_has_in = this.pros_in_skulist(pros_in);
    for(let I = 0; I < this.keys.length; I++) {
        if(!ARRINDEX.includes(I)) {                       
            this.keys[I]['items'].forEach( i => {                                     
                if(pros_has_in.includes(i['value'])) {
                    i.block = true;
                }else{
                    i.block = false;
                };
            })
        }             
    }
},