vue实现商城上货组件简易版
(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：修改UA在PC中访问只能在微信中打开的链接方法