前面讲了属性的添加，添加完成后，数据库中已经存在数据了，这时再继续商品的添加时，就可以进行属性的选择了。
在商品添加过程中，属性选择是一个关键步骤。首先，界面需要展示嵌套的属性数据，用户通过点击选择属性。选中后，系统会通过一个盒子展示所选属性，若没有值则不展示。为了处理选中属性，定义了一个存储数据的数组，并通过代码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(); //关闭掉弹窗
},
、
