目录
gitee仓库地址:
业务需求
----展示SPU列表结构
----添加SPU|修改SPU
----展示添加SKU结构
1.测试切换
2.引入注册使用子组件
gitee仓库地址: https://gitee.com/CMD-UROOT/my_project/commits/master
大家根据上传历史进行查找你需要的代码
业务需求 完成SPU管理内容切换
----展示SPU列表结构
文章图片
----添加SPU|修改SPU
文章图片
文章图片
----展示添加SKU结构
文章图片
1.测试切换 在views/product/Spu/index.vue中:
文章图片
效果:
文章图片
文章图片
现在我们不想把这几个div放在同一个组件中,因为添加SPU|修改SPU和展示添加SKU他们的结构都太多了,到时候都放在同一个页面就太多了,看起来很乱,所以我们把这两部分拆成组件进行显示
2.引入注册使用子组件 按照下图建两个文件夹,分别处理添加SPU|修改SPU和展示添加SKU这两部分
文章图片
在SpuForm中:
文章图片
在SkuForm中:
文章图片
在父组件views/product/index.vue中:引入注册使用两个子组件
文章图片
效果和最开始的是一样的,实现了切换效果
【vue后台管理项目|Vue后台管理系统项目(27)SPU管理内容的切换】
推荐阅读
- 前端相关|02-Vue基础之条件渲染和列表渲染
- Web-Douglas|Vue学习基础版汇总V5.0.0
- # yyds干货盘点 # 一文带你解读?JavaScript中的变量作用域和内存问题
- 零基础学JavaScript|三,零基础学习JavaScript----词法结构
- 零基础JavaScript学习|零基础JavaScript学习【完结篇】
- Vue|Vue2.x 项目性能优化之代码优化
- 笔记|JavaScript JSON
- NodeJS和AngularJS之间有哪些区别（）
- JSP和HTML之间有什么区别（）