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

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