本文實例為大家分享了vue實現(xiàn)商城上貨組件的具體代碼，供大家參考，具體內(nèi)容如下
0、結果放前面
點擊查看效果
帶腳手架的源碼
加個Star后，fork下來。
然后在控制臺，先輸入npm install安裝依賴，再輸入npm run dev運行查看效果
1、先列需求
一切開發(fā)都是基于需求做的，所以需求先行，根據(jù)需求設計功能。
需求如下：
上貨商品有多個屬性類別；（例如：顏色、尺寸、型號）
每個類別有多個子屬性；（例如：白色、綠色、金色）
每個商品必然具備每個類別的其中一個子屬性；
除此之外還有額外屬性，如【庫存】、【描述】、【價格】等，每個都有；
要求屬性類別可以無限添加；
要求每個屬性類別下面的子屬性可以無限添加；
最后輸出所有組合，以及他們每個組合的額外屬性；
例如：
顏色（白色，金色），尺寸（41，42）；
那么一共有四種組合：（白色，41），（白色，42），（金色，41），（金色，42）；
然后給每個組合加上價格、數(shù)量等屬性，最后用JSON格式輸出；
例如輸出以下結果：
[
{
'顏色': '白色',
'尺寸': '10',
'price': '0',
'count': '1'
},
{
'顏色': '白色',
'尺寸': '20',
'price': '0',
'count': '1'
},
{
'顏色': '綠色',
'尺寸': '10',
'price': '0',
'count': '1'
},
{
'顏色': '綠色',
'尺寸': '20',
'price': '0',
'count': '1'
}
]
2、思路
由于無限可擴展的特性，因此模塊分拆為兩部分：
負責支持無限添加功能（包括類別和類別的屬性）；
根據(jù)已添加的類別和屬性，組合出列表，并將列表展示或輸出；
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>數(shù)量</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 () {
// 創(chuàng)建新類別
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
},
// 將數(shù)據(jù)組合成列表，利用遞歸的特性
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) {
// 組合到最后一個后，創(chuàng)建一個新的對象，然后放置入列表中
let result = Object.assign({}, obj)
result.price = '0'
result.count = '1'
arr.push(result)
} else {
this.toGet(arr, obj, currentIndex + 1, maxLength)
}
})
}
}
}
</script>
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
