本文實例為大家分享了vue實現商城上貨組件的具體代碼，供大家參考，具體內容如下

0、結果放前面

點擊查看效果

帶腳手架的源碼

加個Star后，fork下來。

然后在控制臺，先輸入npm install安裝依賴，再輸入npm run dev運行查看效果

1、先列需求

一切開發都是基于需求做的，所以需求先行，根據需求設計功能。

需求如下：

例如：

例如輸出以下結果：

[ {  '顏色': '白色',  '尺寸': '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>