vue實(shí)現(xiàn)商城上貨組件簡易版

更新時(shí)間：2017年11月27日 12:27:08 作者：qq20004604

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商城上貨組件簡易版，50行js代碼實(shí)現(xiàn)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)商城上貨組件的具體代碼，供大家參考，具體內(nèi)容如下

0、結(jié)果放前面

點(diǎn)擊查看效果

帶腳手架的源碼

加個(gè)Star后，fork下來。

然后在控制臺(tái)，先輸入npm install安裝依賴，再輸入npm run dev運(yùn)行查看效果

1、先列需求

一切開發(fā)都是基于需求做的，所以需求先行，根據(jù)需求設(shè)計(jì)功能。

需求如下：

上貨商品有多個(gè)屬性類別；（例如：顏色、尺寸、型號(hào)）
每個(gè)類別有多個(gè)子屬性；（例如：白色、綠色、金色）
每個(gè)商品必然具備每個(gè)類別的其中一個(gè)子屬性；
除此之外還有額外屬性，如【庫存】、【描述】、【價(jià)格】等，每個(gè)都有；
要求屬性類別可以無限添加；
要求每個(gè)屬性類別下面的子屬性可以無限添加；
最后輸出所有組合，以及他們每個(gè)組合的額外屬性；

例如：

顏色（白色，金色），尺寸（41，42）；
那么一共有四種組合：（白色，41），（白色，42），（金色，41），（金色，42）；
然后給每個(gè)組合加上價(jià)格、數(shù)量等屬性，最后用JSON格式輸出；

例如輸出以下結(jié)果：

[
 {
  '顏色': '白色',
  '尺寸': '10',
  'price': '0',
  'count': '1'
 },
 {
  '顏色': '白色',
  '尺寸': '20',
  'price': '0',
  'count': '1'
 },
 {
  '顏色': '綠色',
  '尺寸': '10',
  'price': '0',
  'count': '1'
 },
 {
  '顏色': '綠色',
  '尺寸': '20',
  'price': '0',
  'count': '1'
 }
]

2、思路

由于無限可擴(kuò)展的特性，因此模塊分拆為兩部分：

負(fù)責(zé)支持無限添加功能（包括類別和類別的屬性）；
根據(jù)已添加的類別和屬性，組合出列表，并將列表展示或輸出；

3、代碼如下

由于功能類似，因此沒有寫刪除、修改功能，但思路跟添加是一致的。

點(diǎn)擊查看效果

帶腳手架的源碼

加個(gè)Star后，fork下來。

然后在控制臺(tái)，先輸入npm install安裝依賴，再輸入npm run dev運(yùn)行查看效果

詳細(xì)請(qǐng)參考注釋：

/**
* Created by 王冬 on 2017/11/14.
* QQ: 20004604
* weChat: qq20004604
*/

<template>
 <div>
  <button @click='getList'>輸出結(jié)果</button>
  <div>
   輸入分類名，然后點(diǎn)擊【確認(rèn)】按鈕添加新的分類
   <input type='text' v-model='category'>
   <button @click='addCategory'>確認(rèn)</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)'>點(diǎn)擊添加</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>價(jià)格</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;
 }

 /*--清除浮動(dòng)--*/
 .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: {
   // 添加一個(gè)新的類別
   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 => {
     // 在組合到最后一個(gè)之前，不停的往模板對(duì)象上添加屬性
     obj[this.categoryList[currentIndex].name] = item
     if (currentIndex === maxLength - 1) {
      // 組合到最后一個(gè)后，創(chuàng)建一個(gè)新的對(duì)象，然后放置入列表中
      let result = Object.assign({}, obj)
      result.price = '0'
      result.count = '1'
      arr.push(result)
     } else {
      this.toGet(arr, obj, currentIndex + 1, maxLength)
     }
    })
   }
  }
 }
</script>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: