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

时间:2021-05-26

本文实例为大家分享了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*/<template> <div> <button @click='getList'>输出结果</button> <div> 输入分类名,然后点击【确认】按钮添加新的分类 <input type='text' v-model='category'> <button @click='addCategory'>确认</button> </div> <template v-for='i in categoryList'> <div class='category'> <p>类别:{{i.name}}</p> <div>属性: <p>新增属性名:<input type='text' v-model='i.newPropertyName'> <button @click='addToPropertyList(i)'>点击添加</button> </p> <div class='property-list'> <template v-for='pro in i.propertyList'> <div class='property'>{{pro}}</div> </template> <div class='clearfloat'></div> </div> </div> </div> </template> <p>以下是展示列表</p> <div class='show-list'> <table> <tr> <td v-for='i in categoryList'> {{i.name}} </td> <td>价格</td> <td>数量</td> </tr> <tr v-for='(val,key) in showList'> <td v-for='i in categoryList'> {{val[i.name]}} </td> <td> <input type='text' v-model="val['price']"> </td> <td> <input type='text' v-model="val['count']"> </td> </tr> </table> </div> </div></template><style scoped> .category { border: 1px solid #333; } .property { float: left; border: 1px solid #333; display: inline-block; } table { border-collapse: collapse; } th, td { border: 1px solid #000; } .clearfloat { width: 0; clear: both; overflow: hidden; visibility: hidden; }</style><script> export default { data () { return { // 要添加的新类别的名字 category: '', // 类别列表 categoryList: [ { // 类别名 name: '颜色', // 类别属性列表 propertyList: ['白色', '绿色'] }, { name: '尺寸', propertyList: ['10', '20'] }, { name: '类型', propertyList: ['衣服', '裤子'] } ] } }, computed: { // 输出列表 showList () { let arr = [] this.toGet(arr, {}, 0, this.categoryList.length) return arr } }, methods: { // 添加一个新的类别 addCategory () { // 创建新类别 let obj = { name: this.category, propertyList: [], newPropertyName: '' } // 添加到类别列表中 this.categoryList.push(obj) this.category = '' }, // 向类别添加属性 addToPropertyList (category) { // 在该类别的属性里列表里添加新的属性 category.propertyList.push(category.newPropertyName) category.newPropertyName = '' }, // 递归 getList () { console.log(this.showList) return this.showList }, // 将数据组合成列表,利用递归的特性 toGet (arr, obj, currentIndex, maxLength) { if (currentIndex >= maxLength) { return } this.categoryList[currentIndex].propertyList.forEach(item => { // 在组合到最后一个之前,不停的往模板对象上添加属性 obj[this.categoryList[currentIndex].name] = item if (currentIndex === maxLength - 1) { // 组合到最后一个后,创建一个新的对象,然后放置入列表中 let result = Object.assign({}, obj) result.price = '0' result.count = '1' arr.push(result) } else { this.toGet(arr, obj, currentIndex + 1, maxLength) } }) } } }</script>

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章