本文实例为大家分享了vue实现商城上货组件的具体代码,供大家参考,具体内容如下
<强> 0,结果放前面
点击查看效果
带脚手架的源码
加个明星后,叉下来。
然后在控制台,先输入npm安装安装依赖,再输入npm运行dev运行查看效果
<强> 1,先列需求
一切开发都是基于需求做的,所以需求先行,根据需求设计功能。
需求如下:
<李>上货商品有多个属性类别;(例如:颜色,尺寸,型号)
<李>每个类别有多个子属性;(例如:白色,绿色,金色)
<李>每个商品必然具备每个类别的其中一个子属性;李
<李>除此之外还有额外属性,如【库存】,【描述】,【价格】等,每个都有,李
<李>要求属性类别可以无限添加;李
<李>要求每个属性类别下面的子属性可以无限添加;李
<李>最后输出所有组合,以及他们每个组合的额外属性;李
例如:
<李>颜色(白色,金色),尺寸(41、42);李
<李>那么一共有四种组合:(白色,41),(白色,42),(金色,41),(金色,42);李
<李>然后给每个组合加上价格,数量等属性,最后用JSON格式输出。
李
例如输出以下结果:
(
{
颜“色”:“白色”,
“尺寸:“10”,
“价格”:“0”,
“数”:' 1 '
},
{
颜“色”:“白色”,
“尺寸:“20”,
“价格”:“0”,
“数”:' 1 '
},
{
颜“色”:“绿色”,
“尺寸:“10”,
“价格”:“0”,
“数”:' 1 '
},
{
颜“色”:“绿色”,
“尺寸:“20”,
“价格”:“0”,
“数”:' 1 '
}
］
之前
<强> 2,思路
由于无限可扩展的特性,因此模块分拆为两部分:
负责支持无限添加功能(包括类别和类别的属性),
根据已添加的类别和属性,组合出列表,并将列表展示或输出。
<强> 3代码如下
由于功能类似,因此没有写删除,修改功能,但思路跟添加是一致的。
点击查看效果
带脚手架的源码
加个明星后,叉下来。
然后在控制台,先输入npm安装安装依赖,再输入npm运行dev运行查看效果
详细请参考注释:
/* *
*由王冬比;
& lt;/td>
& lt; td>
& lt;输入类型=v模型“文本”=皏al”(“计数”)在
& lt;/td>
& lt;/tr>
& lt;/table>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; scoped>风格;
.category {
边界:1 px固体# 333;
}
.property {
浮:左;
边界:1 px固体# 333;
显示:inline-block;
}
表{
border-collapse:崩溃;
}
th, td {
边界:1 px固体# 000;
}/*——清除浮动——*/.clearfloat {
宽度:0;
明确:;
溢出:隐藏;
可见性:隐藏;
}
& lt;/style>
& lt; script>
出口默认{
数据(){
返回{//要添加的新类别的名字
类别:”,//类别列表
categoryList:(
{//类别名
名称:“颜色”,//类别属性列表
propertyList:['白色”、“绿”色)
},
{
名称:“尺寸”,
propertyList:(“10”、“20”)
},
{
名称:“类型”,
propertyList:['衣服”、“裤子”)
}
］
}
},
计算:{//输出列表
showList () {
让arr=[]
这一点。沃特森(加勒比海盗,{},0,this.categoryList.length)
返回加勒比海盗
}
},
方法:{//添加一个新的类别
addCategory () {//创建新类别
让obj={
名称:this.category,
propertyList: [],
newPropertyName:“
}//添加到类别列表中
this.categoryList.push (obj)
这一点。类别="
},//向类别添加属性
addToPropertyList(类别){//在该类别的属性里列表里添加新的属性
category.propertyList.push (category.newPropertyName)
类别。newPropertyName="
},//递归
getList () {
console.log (this.showList)
返回this.showList
},//将数据组合成列的表,利用递归的特性
沃特森(arr obj, currentIndex最大长度){
如果(currentIndex祝辞=最大长度){
返回
}
this.categoryList currentIndex .propertyList。forEach(项=比;{//在组合到最后一个之前,不停的往模板对象上添加属性
obj [this.categoryList [currentIndex] . name]=项目
如果(currentIndex===最大长度- 1){//组合到最后一个后,创建一个新的对象,然后放置入列表中
让结果=对象。obj分配({})
结果。价格=' 0 '
结果。数=' 1 '
arr.push(结果)
其他}{
这一点。沃特森(arr obj, currentIndex + 1,最大长度)
}
})
}
}
}
& lt;/script>
