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

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

0、结果放前面

点击查看效果

带脚手架的源码

加个Star后，fork下来。

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

1、先列需求

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

需求如下：

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

例如：

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

例如输出以下结果：

2、思路

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

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

3、代码如下

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

点击查看效果

带脚手架的源码

加个Star后，fork下来。

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

详细请参考注释：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!