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

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

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

1、界面情况回顾

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

2、选中的界面

3、选中后的展示

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

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

4、选中和处理

4.1 选中：执行clickConfirmSelect

4.2 处理代码：

html 复制代码

			//点击确认选择
			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 = arr
				this.$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(); //关闭掉弹窗

、

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