vue实现商城上货组件简易版

本文实例为大家分享了vue实现商城上货组件的具体代码，供大家参考，具体内容如下

成都创新互联公司服务项目包括南涧网站建设、南涧网站制作、南涧网页制作以及南涧网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，南涧网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到南涧省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

0、结果放前面

点击查看效果

带脚手架的源码

加个Star后，fork下来。

然后在控制台，先输入npm install安装依赖，再输入npm run dev运行查看效果

1、先列需求

一切开发都是基于需求做的，所以需求先行，根据需求设计功能。

需求如下：

• 上货商品有多个属性类别；（例如：颜色、尺寸、型号）
• 每个类别有多个子属性；（例如：白色、绿色、金色）
• 每个商品必然具备每个类别的其中一个子属性；
• 除此之外还有额外属性，如【库存】、【描述】、【价格】等，每个都有；
• 要求属性类别可以无限添加；
• 要求每个属性类别下面的子属性可以无限添加；
• 最后输出所有组合，以及他们每个组合的额外属性；

例如：

• 颜色（白色，金色），尺寸（41，42）；
• 那么一共有四种组合：（白色，41），（白色，42），（金色，41），（金色，42）；
• 然后给每个组合加上价格、数量等属性，最后用JSON格式输出；
  

例如输出以下结果：

[
 {
  '颜色': '白色',
  '尺寸': '10',
  'price': '0',
  'count': '1'
 },
 {
  '颜色': '白色',
  '尺寸': '20',
  'price': '0',
  'count': '1'
 },
 {
  '颜色': '绿色',
  '尺寸': '10',
  'price': '0',
  'count': '1'
 },
 {
  '颜色': '绿色',
  '尺寸': '20',
  'price': '0',
  'count': '1'
 }
]

2、思路

由于无限可扩展的特性，因此模块分拆为两部分：

负责支持无限添加功能（包括类别和类别的属性）；
根据已添加的类别和属性，组合出列表，并将列表展示或输出；

3、代码如下

由于功能类似，因此没有写删除、修改功能，但思路跟添加是一致的。

点击查看效果

带脚手架的源码

加个Star后，fork下来。

然后在控制台，先输入npm install安装依赖，再输入npm run dev运行查看效果

详细请参考注释：

/**
* Created by 王冬 on 2017/11/14.
* QQ: 20004604
* weChat: qq20004604
*/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。