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

},

相关推荐
2501_916008893 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·开发语言·ios·小程序·uni-app·iphone·swift
阿金要当大魔王~~3 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发3 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
开发者小天9 小时前
uniapp中对接开发激励广告视频
uni-app
奎歪歪9 小时前
UniApp缓存系统详解
缓存·uni-app·1024程序员节
2501_9151063211 小时前
iOS 打包 IPA 全流程详解,签名配置、工具选择与跨平台上传实战指南
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张11 小时前
iOS 混淆实操指南多工具组合实现 IPA 混淆、加固与发布治理 IPA 加固
android·ios·小程序·https·uni-app·iphone·webview
十五春会1 天前
【uniapp】App平台展示pdf文件
pdf·uni-app
请叫我欧皇i1 天前
保姆级教程vscode创建uniapp vue3+ts+pinia项目并实现自动导入、打包功能
ide·vscode·uni-app
海鸥两三1 天前
Uni-App(Vue3 + TypeScript)项目结构详解 ------ 以 Lighting-UniApp 为例,提供源代码
vue.js·typescript·uni-app·1024程序员节