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

本文实例为大家分享了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>

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