10.vue3项目(十):spu管理页面的sku的新增和修改

这篇博客详细介绍了在Vue3项目中如何实现SPU管理页面的SKU功能,包括静态页面搭建、点击添加时的数据回显、数据收集与保存、SKU列表展示以及SPU删除操作。涉及到组件通信、接口调用和表格状态管理等关键技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

一、sku静态页面的搭建

1.思路分析

2.代码实现

3.效果展示

二、 在spu页面点击添加,实现sku页面的接口数据回显

1.思路分析

2.代码实现

3.效果展示

三、 在sku页面收集数据,并做保存

1.思路分析

2.代码实现

3.效果展示

四、 sku列表展示

1.思路分析

2.代码实现

3.效果展示

五、spu删除

1.思路分析

2.代码实现

3.效果展示

六、感谢支持


一、sku静态页面的搭建

1.思路分析

  • 首先要完成静态页面的搭建
  • 然后再spu页面点击一下新增sku的按钮,主页的内容要切换,因此scene要变更
  • 在sku点击取消,需要回到主页,因此涉及到子传父,使用$emit,并且将其defineEmits暴露出去,父亲收到后将主页变成查询页

2.代码实现

index.vue:

<template>
  <div>
    <!-- 三级分类 -->
    <Category :scene="scene"></Category>

    <!-- 卡片 -->
    <el-card style="margin: 10px 0px">
      <div v-show="scene == 0">
        <el-button @click="addSpu" type="primary" size="default" icon="Plus
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鹏哥哥啊Aaaa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值