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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/81189.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

负载均衡 ELB 在 zkmall开源商城高流量场景下的算法优化

在电商大促、直播带货等高频交易场景下,流量突发增长对系统稳定性提出严峻挑战。ZKmll 开源商城通过对负载均衡 ELB(Elastic Load Balancer)算法的深度优化,结合业务场景特性设计动态加权轮询 地域感知 热点分流的混合策略&…

Linux干货(三)

前言 从B站黑马程序员Linux课程摘选的学习干货,新手友好!若有侵权,会第一时间处理。 目录 前言 1.which find命令 1.which命令 2.find命令 2.grep wc 管道符 1.grep命令 2.wc命令 3.管道符 3.echo tail 重定向符 1.echo命令 2.反…

Sigmoid与Softmax:从二分类到多分类的深度解析

Sigmoid与Softmax:从二分类到多分类的深度解析 联系 函数性质:二者都是非线性函数 ,也都是指数归一化函数,可将输入值映射为0到1之间的实数 ,都能把输出转化成概率分布的形式,在神经网络中常作为激活函数使用。Softmax是Sigmoid的推广:从功能角度看,Softmax函数可视为…

文件系统交互实现

关于之前的搭建看QT控件文件系统的实现-CSDN博客,接下来是对本程序的功能完善,我想着是这样设计的,打开一个目录以后,鼠标选中一个项可以是目录,也可以是文件,右键可以出现一个菜单选择操作,比如…

[ctfshow web入门] web75

信息收集 启用了open_basedir,所以之前的方法又不能用了 解题 cforeach(new DirectoryIterator("glob:///*") as $a){echo($a->__toString(). ); } ob_flush();cif ( $a opendir("glob:///*") ) {while ( ($file readdir($a)) ! false …

Vulfocus靶场-文件上传-3

WSO2 文件上传 (CVE-2022-29464) WSO2是一家成立于 2005 年的开源技术提供商。它提供了一个企业平台,用于在本地和整个 Internet 上 集成应用程序编程接口(API)、应用程序和 Web 服务。 某些 WSO2 产品允许无限制的文件上传和远程代码执行。…

基于MCP的桥梁设计规范智能解析与校审系统构建实践

引言 今天本文准备盘一个大活,聊一聊偏特定行业一点的AI技术深入应用思考及实践。 一、传统设计行业项目背景与行业痛点 在桥梁设计领域,标准规范是设计的基础,直接关系到桥梁结构的安全性、耐久性和经济性。然而,传统的规范应…

远程连接电脑的方法?异地远程桌面连接和三方软件实现

远程连接电脑,是指通过网络技术,在一台设备上操控另一台设备的电脑桌面,实现跨地域的操作和管理。在日常工作、技术支持、远程办公等场景中,远程连接电脑都发挥着重要作用。实现远程连接电脑主要有系统自带工具和第三方软件两种方…

win11 安装 wsl ubuntu 18.04后换源失败!

记录几个问题是如何解决的。 一 下载wsl后,有报错: Installing, this may take a few minutes... WslRegisterDistribution failed with error: 0x8007019e Error: 0x8007019e ??????? Linux ? Windows ???? Press any key to continue... …

PY32系列单片机离线烧录器,可配置选项字节和上机台批量烧录

PY32离线烧录器采用 MINI-USB 接口,提供稳定的物理连接。设备与电脑采用串口方式通讯,波特率固定为 1M。需配合我们的上位机使用。PY32离线烧录器现支持芯片型号在PY32F002A/002B/002/003/030/071/072/040/403/303各封装和XL32F001/003。烧录器仅提供 3.…

深入理解 this 指向与作用域解析

引言 JavaScript 中的 this 关键字的灵活性既是强大特性也是常见困惑源。理解 this 的行为对于编写可维护的代码至关重要,但其动态特性也会让我们感到困惑。 与大多数编程语言不同,JavaScript 的 this 不指向函数本身,也不指向函数的词法作…

# IntelliJ IDEA企业版开发入门:包、类与项目结构详解

--- ## 一、项目结构与包的概念 ### 1. 标准项目目录解析 在IntelliJ IDEA中,一个Java项目通常包含以下核心目录: - **src**:源代码根目录。 - **main**:主代码目录,存放业务逻辑代码。 - **java**:Java…

NGINX 开源与社区动态:从基石到浪潮,持续演进的生态力量

NGINX 之所以能够成为全球应用最为广泛的 Web 服务器和反向代理软件之一,其成功的核心驱动力无疑是开源。开放的源代码、活跃的社区参与以及透明的开发过程,共同铸就了 NGINX 的辉煌。然而,正如所有大型开源项目一样,NGINX 的开源之路也并非一帆风顺,其社区动态也时常涌现…

Electron(一)

前言: 参考尚硅谷视频记录:b站尚硅谷视频-1小时上手electron 一、什么是electron? 是一款应用广泛的、跨平台的、桌面应用开发框架。 应用广泛:很多桌面应用都是这个框架写的,例如腾讯qq、百度云跨平台:跨window、…

AI Agent开发第64课-DIFY和企业现有系统结合实现高可配置的智能零售AI Agent(上)

开篇 我们之前花了将近10个篇章讲Dify的一些基础应用,包括在讲Dify之前我们讲到了几十个AI Agent的开发例子,我不知道大家发觉了没有,在AI Agent开发过程中我们经常会伴随着这样的一些问题: 需要经常改猫娘;需要经常改调用LLM的参数,甚至在一个流程中有3个节点,每个节点…

ssti刷刷刷

[NewStarCTF 公开赛赛道]BabySSTI_One 测试发现过滤关键字,但是特殊符号中括号、双引号、点都能用 可以考虑拼接或者编码,这里使用拼接 ?name{{()["__cla"~"ss__"]}}?name{{()["__cla"~"ss__"]["__ba&…

google-Chrome常用插件

google-Chrome常用插件 1. json格式化展示插件 github下载jsonview-for-chrome插件 通过离线安装方式 拓展程序-》管理拓展程序-》打开开发者模式-》加载已解压的拓展程序-》选择拓展程序解压的位置 2. 翻译插件 插件下载地址:Immersive Translate - Bilingual …

基于redis实现分布式锁方案实战

分布式锁的进阶实现与优化方案 作为Java高级开发工程师,我将为您提供更完善的Redis分布式锁实现方案,包含更多生产级考量。 1. 生产级Redis分布式锁实现 1.1 完整实现类(支持可重入、自动续约) import redis.clients.jedis.Je…

XML简要介绍

实际上现在的Java Web项目中更多的是基于springboot开发的,所以很少再使用xml去配置项目。所以我们的目的就是尽可能快速的去了解如何读懂和使用xml文件,对于DTD,XMLSchema这类约束的学习可以放松,主要是确保自己知道这里面的大致…

UI自动化测试中,一个完整的断言应所需要考虑的问题

在UI自动化测试中,一个完整的断言应全面覆盖用户界面(UI)的功能性、交互性和视觉正确性。以下是断言需要包含的核心内容及详细说明: 一、基础元素验证 存在性断言 验证元素存在于DOM中示例代码(Python + Selenium):assert driver.find_element(By.ID, "submit_btn&…