谷粒商城P71前端attrgroup.vue

最新推荐文章于 2022-12-29 10:33:19 发布
最新推荐文章于 2022-12-29 10:33:19 发布
阅读量270 收藏
点赞数
文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huhuhutony/article/details/120219779
版权

1.导入ElementUI的分栏间隔组件

在这里插入图片描述

2.左边树状商品分类菜单，右边属性分组

在这里插入图片描述
提取category组件：谷粒商城P71抽取Category公共组件并在attrgroup.vue中使用

3.从逆向工程生成的代码中复制attrgroup.vue中的代码

然后复制除了component之外的其他代码，然后将逆向工程生成的attrgroup-add-or-update.vue复制到src/views/modules/product中，导入组件import AddOrUpdate from './attrgroup-add-or-update'
页面效果：
在这里插入图片描述

4. 绑定左边树状商品分类菜单和右边属性分组

1 . 子组件（category.vue）给父组件（attrgroup.vue）传递数据：使用事件机制（子组件给父组件发送一个事件，携带上数据）
2. 先给子组件绑定上单击事件@node-click并向父组件发送事件
在这里插入图片描述
在这里插入图片描述
3. 在父组件中绑定子组件发送过来的事件
在这里插入图片描述
在这里插入图片描述
这样attrgroup就可以拿着catId去数据库查属性分组了

爱吃小香葱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2020尚硅谷 谷粒商城 建表sql语句
05-05
gulimall_pms 商品 drop table if exists pms_attr; drop table if exists pms_attr_attrgroup_relation; drop table if exists pms_attr_group; drop table if exists pms_brand; drop table if exists pms_category; drop table if exists pms_category_brand_relation; drop table if exists pms_comment_replay; drop table if exists pms_product_attr_value; drop table if exists pms_sku_images; drop table if exists pms_sku_info; drop table if exists pms_sku_sale_attr_value; drop table if exists pms_spu_comment; drop table if exists pms_spu_images; drop table if exists pms_spu_info; drop table if exists pms_spu_info_desc; /*==============================================================*/ /* Table: pms_attr */ /*==============================================================*/ create table pms_attr ( attr_id bigint not null auto_increment comment '属性id', attr_name char(30) comment '属性名', search_type tinyint comment '是否需要检索[0-不需要，1-需要]', icon varchar(255) comment '属性图标', value_select char(255) comment '可选值列表[用逗号分隔]', attr_type tinyint comment '属性类型[0-销售属性，1-基本属性，2-既是销售属性又是基本属性]', enable bigint comment '启用状态[0 - 禁用，1 - 启用]', catelog_id bigint comment '所属分类', show_desc tinyint comment '快速展示【是否展示在介绍上；0-否 1-是】，在sku中仍然可以调整', primary key (attr_id) ); alter table pms_attr comment '商品属性'; /*==============================================================*/ /* Table: pms_attr_attrgroup_relation */ /*==============================================================*/ create table pms_attr_attrgroup_relation ( id bigint not null auto_increment comment 'id', attr_id bigint comment '属性id', attr_group_id bigint comment '属性分组id', attr_sort int comment '属性组内排序', primary key (id) ); alter table pms_attr_attrgroup_relation comment '属性&
谷粒商城P71抽取Category公共组件并在attrgroup.vue中使用
爱吃小香葱的博客
09-10 347
1.在modules/common/下新建category.vue 2.编写category.vue，只保留原来一部分简单内容 <!-- 公共组件 --> <template> <el-tree :data="menus" :props="defaultProps" node-key="catId" ref="menuTree"> </el-tree> </template> <script> //这里可以导入其他文件（比如
谷粒商城-基础篇-商品服务4-属性分组（P71-P74）
ljn1046016768的博客
05-07 1418
谷粒商城 商品服务 属性分组
谷粒商城p71左侧没有新增菜单
wsx9172的博客
09-21 345
P71左边不显示新增菜单，是因为课件里的sys_menus.sql用的是mall_admin数据库，教程里带着我们创建的数据库名字是gulimall_admin。太坑了，记一下希望能帮到需要的人。改一下sql第18行USE。
谷粒商城最全报错笔记
m0_65832230的博客
07-20 8276
谷粒商城碰壁笔记，来自于CSDN，还之于CSDN
p71_fzerotx.zip_fzerotx_fzerotx函数_数值解法，方程求根
07-14
实现方程数值解法的函数是fzero，介绍其算法思想
建筑工程测量课件汇编P71.doc
09-28
建筑工程测量课件汇编P71.doc
海尔LD40U3200刷机固件_板号TP.RT2649.P71_机编DH1TJ000200_务必确认机编一致
12-24
海尔LD40U3200刷机固件_板号TP.RT2649.P71_机编DH1TJ000200_务必确认机编一致 LD40U3100 LD40U3200升级操作说明 1、LD40U3100 LD40U3200是同一版程序 2、升级时不要更改文件名称，将U盘中原来其他型号的的install...
p71 - p80 ECDHE握手解析
05-15
ECDHE握手解析 在上文中，我们讨论了ECDHE握手解析的过程。... 首先，让我们回顾一下离散对数问题。离散对数问题是指在模幂运算下的对数问题。它的定义是：给定模数p、底数a和整数b，计算a^b mod p的值。...
p71 - p91 CPU是如何来执行任务的
最新发布
05-15
p71 - p91 CPU是如何来执行任务的
《谷粒商城》2020基础篇完整代码
11-22
《谷粒商城》2020基础篇完整代码，纯手工打造。完美复刻，教程代码。都已调通。 项目采用SpringCloudAlibaba技术栈。由业务集群系统+后台管理系统构成，打通了微服务分布式开发及全栈开发技能，包含前后分离全栈开发、Restful接口、数据校验、网关、注册发现、配置中心、熔断、限流、降级、链路 追踪、性能监控、压力测试、系统预警、集群部署、持续集成、持续部署... 包括前台商城系统以及后台管理系统，基于 SpringCloud + SpringCloudAlibaba + MyBatis-Plus等技术实现。
谷粒商城基础篇完结
柠檬不萌的博客
12-29 999
首先我们根据前端返回给我的json数据，我们可以使用网上人家写好的一个方法，就是根据给的json数据生成java对象，这样就会方便很多的事情。
基于Vue的ElementUI级联显示以及数据回显
lovoo的博客
06-20 4886
前言 在我们做项目时，可能会遇到许多树形展示的数据，在编辑时要求选择当前数据所在的上级，这时就要用到级联，如图： 如何实现这种功能？在这里分三部份来说明，数据及实体类，前端展示，后台数据查询。 一、创建相关实体类及数据表 1、创建商品分类表： CREATE TABLE `mall_pms`.`pms_category` ( `cat_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '分类id', `name` char(50) CHARACTER S
三十一.属性分组接口新增修改功能编写
绅士jiejie的博客
07-07 641
一.修改分组接口新增修改相关接口 点击页面的新增按钮出现的所属分类如下红框所标注，不应该出现第4级框，因为分类到了第3级就已经是最底层了。 修改下后端，让子类为null的数据就不要舍值了，如下修改CategoryEntity类： 在子类集合上加上 @JsonInclude(value = JsonInclude.Include.NON_EMPTY)注解表示如果数据为null，则就不返回这个字段数据了。 修改后效果如下： 点击新增，看下数据情况： 点击修改，情况如下： 发现所属分类数据没有回显。
电商项目——商品服务-API-属性分组——第十一章——上篇
qq_44891295的博客
10-15 812
文章目录1： 1：
谷粒商城 问题解决记录
fendouweiqian的博客
04-02 405
sql 文件没有 https://blog.csdn.net/hancoder/article/details/106922139 导入人人项目后, 包找不到 项目根目录, cmd运行 mvn idea:module
谷粒商城-个人笔记(基础篇二）
热门推荐
代码的知行者
10-16 1万+
​
PO、DO、TO、DTO
weixin_45592502的博客
08-04 704
1．PO持久对象 PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据的操作。 2、DO（Domain 0bject)领域对象 就是从现实世界中推象出来的有形或无形的业务实体。 3.TO(Transfer 0bject)，数据传输对象传输的对象 不同的应用程序之间传输的对象。微服务 4.DTO(Data Transfer Obiect)数据传输对象 这个概念来源于J2EE的设汁模式，原来的目的是为了EJB的分布式应用握供粗粒度的数据实体，以减少分布式调用的次数，从而握
订单结构
weixin_30929011的博客
08-01 1463
1.订单表 　　订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单。 create table So_order ( id bigint not null auto_increment comment '订单id', member_id ...
3)实验指导P71基础编程第1题:逆序存放:学号4-3.c保存;
03-20
以下是逆序存放的代码： #include <stdio.h> #define N 10 int main() { int a[N], i; printf("请输入%d个整数：\n", N); for (i = 0; i ; i++) scanf("%d", &a[i]); printf("逆序存放后的数组为：\n");...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值