时间:2021-05-26
本文实例为大家分享了vue实现商城上货组件的具体代码,供大家参考,具体内容如下
0、结果放前面
点击查看效果
带脚手架的源码
加个Star后,fork下来。
然后在控制台,先输入npm install安装依赖,再输入npm run dev运行查看效果
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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了vue实现简易打地鼠游戏的具体代码,供大家参考,具体内容如下打地鼠简易版*{margin:0;padding:0;}#main{border
本文实例为大家分享了Android实现简易版打地鼠的具体代码,供大家参考,具体内容如下目标效果:1.activity_main.xml页面:2.MainActi
这个应该是简易版的美图秀秀(小伙伴们吐槽:你这也叫简易版的??我们看着怎么不像啊……)。好吧,只是在图片上绘制涂鸦,然后保存。一、选择图片这个道长有必要说一下,
300来行python代码实现简易版学生成绩管理系统,供大家参考,具体内容如下使用链表来实现classNode(object):def__init__(self
我之前写过一个简易版的自动+手动轮播图:简易轮播图但是这个轮播图在切换的时候是没有实现无缝滚动的,每张图片都是单张切换的,而不是滑动。现在用JQuery实现无缝