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(); //关闭掉弹窗

},

相关推荐
鱼樱前端2 小时前
uni-app快速入门章法(二)
前端·uni-app
三天不学习8 小时前
uniapp集成语音识别与图片识别集成方案【百度智能云】
百度·uni-app·语音识别
卷Java1 天前
饼状图修复总结
java·spring boot·uni-app·echarts
闲蛋小超人笑嘻嘻1 天前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app
2501_916007471 天前
前端开发工具都有哪些?常用前端开发工具清单与场景化推荐
android·ios·小程序·https·uni-app·iphone·webview
2501_915909061 天前
iOS 应用上架全流程解析,苹果应用发布步骤、ipa 上传工具、TestFlight 测试与 App Store 审核经验
android·macos·ios·小程序·uni-app·cocoa·iphone
茶憶1 天前
uniapp 请求接口封装和使用
vue.js·uni-app
肥喵蒙太奇1 天前
uniapp 使用towxml
uni-app
Nan_Shu_6142 天前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
卷Java2 天前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app