当前位置：首页 > news >正文

uniapp-商城-59-后台新增商品（属性的选中，进行过滤展示，filter，some，every和map）

news 2025/5/17 5:29:51

前面讲了属性的添加，添加完成后，数据库中已经存在数据了，这时再继续商品的添加时，就可以进行属性的选择了。

在商品添加过程中，属性选择是一个关键步骤。首先，界面需要展示嵌套的属性数据，用户通过点击选择属性。选中后，系统会通过一个盒子展示所选属性，若没有值则不展示。为了处理选中属性，定义了一个存储数据的数组，并通过代码clickConfirmSelect进行选中和处理。该函数首先过滤出父级和子级属性中被选中的项，然后进行映射处理，最终将选中的属性数组保存到商品信息中，并关闭弹窗。这一过程确保了属性选择的准确性和数据的即时展示。

1、界面情况回顾

属性显示其实是个一嵌套的数据显示。

2、选中的界面

3、选中后的展示

通过上面的图片我们要展示，就需要写一个盒子，没有值就不展示，有就需要使用该盒子进行展示。而且还需定义个存储概述据的数组。

然后再将数据读取出来展示在页面上。

4、选中和处理

4.1 选中：执行clickConfirmSelect

4.2 处理代码：

			//点击确认选择clickConfirmSelect() {let arr = this.skuArr.filter(item => {let state = item.children.some(child => child.checked)return item.checked && state}).map(item => {let children = item.children.filter(child => {return child.checked})return {...item,children}})this.goodsFormData.sku_select = arrthis.$refs.attrWrapPop.close();},

4.3 主要的代码，点击选中后的处理：

4.3.1 第一步：点击页面上添加属性这里就会读取数据，并执行 this.getSkuData();

4.3.2 第二步：再是点击弹窗上的选择值，进行提交，此时，页面进行获取 sku_select 展示，并保存到商品信息里面 goodsFormData 保存。

            //点击确认选择是在弹出框上选
            //some 数组至少有一个满足没有就是false   every就是每一个都要满足，不满足就是false
            // 这里filter 选出父级属性 checked =true 被选中的且子级属性有一个被选中的数组对象；
            // 然后再对选中的对象，逐一进行map运算
            //运算就是filter 过滤出来选中的子级元素
            //返回一个数组 arr 且元素为一个对象，对象展开了item ，然后将children的值放到里面，覆盖item中的children
            clickConfirmSelect() {
                let arr = this.skuArr.filter(item => {
                    let state = item.children.some(child => child.checked)
                    return item.checked && state
                }).map(item => {
                    let children = item.children.filter(child => {
                        return child.checked
                    })
                    // console.log(item,11111111);
                    // console.log(children,2222222);
                    return {
                        ...item,
                        // children   //覆盖了item中children
                    }
                })
                this.goodsFormData.sku_select = arr   //赋值后，页面在使用这个数组来显示立即回显
                this.$refs.attrWrapPop.close();   //关闭掉弹窗
            },