vue版添加商品多规格sku实现源码

今天无意中在网上看到的代码，觉得效果不错，于是收藏一下，分享给需要的朋友们学习之用。添加商品多规格几乎是每个商城必备的功能。但每个人都有自己不同的实现原理。以下源码实现的原理是根据多个规格和多个规格对应的属性组合成数列的原理。

截图预览：

代码片段：

this.zum=[];
for (let index in this.k_ruledata) {//循环的次数第一张图是两次第二张图是三次
this.getDate(this.zum,this.k_ruledata[index]);
}

getDate(zum,first){//公共存的集合第一个集合
if(zum.length!=0){
let item = first.k_moreruledata;
let zumto=[];
for(let index in zum){
for(let to in item){
let ss={};
ss.rule_name=zum[index].rule_name+"/"+first.k_rule_name+":"+item[to].rule_name;
zumto.push(ss);
}
}
this.zum=zumto;
}else{
let item = first.k_moreruledata;
for(let index in item){
let ss={};
ss.rule_name=first.k_rule_name+":"+item[index].rule_name;
zum.push(ss);
}
this.zum=zum;
}
},

具体使用方法：

①在components目录下建立一个模板文件。

<template>
<div>
<a-modal
:destroyOnClose="true"
:visible="visible"
width="1000px"
:closable="false"
okText="确定"
cancelText="取消"
centered
:confirmLoading="btnLoading"
@ok="save"
@cancel="visible=false"
title="商品规格添加"
>
<div style="overflow-y: scroll;height: 400px">
<a-form layout="inline" :form="form" style="margin-bottom: 15px">
<a-row style="display: flex;flex-direction: row">
<div v-if="rule">
<span style="margin-right: 10px">规则名称：</span>
<a-input placeholder="填写规格名称"
v-for="(item,index) in ruledata"
:key="index"
v-model="item.rule_name"
@blur="k_addrule(item,$event)"
style="width: 150px;height: 40px;margin-right: 10px">
<a-icon slot="suffix" type="close-circle"
@click="deletrule(index)"
v-if="item.rule_name!=''"/>
</a-input>
</div>
<a-button type="dashed"
icon="plus"
@click="addRule"
style="width: 150px;height: 40px">添加新规则
</a-button>
</a-row>
<a-row v-for="(item,index) in k_ruledata" :key="index"
style="display: flex;flex-direction: row;margin-top: 20px;align-items: center;">
<div style="float:left;display: flex;flex-direction: row">
<span style="margin-right: 10px;margin-top: 5px">{{item.k_rule_name}}:</span>
<div
v-if="item.k_rule"
v-for="(itemto,indexto) in item.k_moreruledata"
:key="indexto"
style="margin-right: 10px;width: 80px;height: 30px;
display: flex;flex-direction: row;
color:#578CE5 ;
border-radius: 4px;border: 1px solid #578CE5">
<div style="flex: 2;border-right: 1px solid #578CE5;text-align: center;line-height: 30px ">
{{itemto.rule_name}}
</div>
<div style="flex: 1;text-align: center;line-height: 30px">X</div>
</div>
</div>
<a-input placeholder="设置属性"
v-model="item.provaluse"
style="width: 150px;height: 30px;margin-right: 10px"/>
<a-button type="primary"
@click="k_addpro(item)"
style="width: 60px;height: 30px">添加
</a-button>
</a-row>
<a-button type="primary" style="margin-top: 20px;width: 600px" @click="autodata">生成</a-button>
<div v-if="autodata_rule">
<a-row style="margin-top: 20px" v-for="(item,index) in autoruledata" :key="index">
<a-col :span="3" style="text-align: center;">
<div style="margin-top: 10px"> {{item.rule_name}}</div>
</a-col>
<a-col :span="4">
<a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" label="金额">
<a-input-number
v-decorator="[
'goods_cost',
{rules: [{ required: true, message: '请填写金额' }]}
]"
:min="0"
></a-input-number>
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" label="库存">
<a-input-number
v-decorator="[
'goods_cost',
{rules: [{ required: true, message: '请填写库存' }]}
]"
:min="0"
></a-input-number>
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="成本价">
<a-input-number
v-decorator="[
'goods_cost',
{rules: [{ required: true, message: '请填写成本价' }]}
]"
:min="0"
></a-input-number>
</a-form-item>
</a-col>
</a-row>
</div>
</a-form>
</div>
</a-modal>
<a-icon type="plus" style="font-size:20px;color:#3E86ED;margin-left: 10px" @click="toadd"></a-icon>
</div>
</template>
<script>
export default {
props: {
ugro_id: {//订单ID
type: Number,
default: 0
},
},
name: "",
data() {
return {
visible: false,
btnLoading: false,
form: this.$form.createForm(this),
rule: false,//规格
ruledata: [],
k_ruledata: [],//一个规格--》对应多个属性
autodata_rule:false,
autoruledata:[],//自动生成的数据
zum:[],
}
},
mounted() {
},
methods: {
toadd() {//添加规格
this.visible = true;
this.rule=false;
this.autodata_rule=false;
this.ruledata = [];//暂时
this.k_ruledata=[];
this.autoruledata=[];
this.zum=[];
},
//添加规则
addRule() {
//添加一个数据
let ss = {rule_id: '', rule_name: ''};
this.ruledata.push(ss);
this.rule = true;
},
//删除规则
deletrule(index) {
this.$confirm({
content: "确认删除这个规则名称?",
okText: "确定",
title: "提示",
okType: "danger",
centered: true,
cancelText: "取消",
onOk: () => {
this.ruledata.splice(index, 1);
//对应删除--相应的属性
k_ruledata.split(index,1);
}
});
},
k_addrule(item,event) {
console.log(item);
let ss={
k_rule_id:item.rule_id,
k_rule_name:item.rule_name,
k_rule:false,
k_provaluse:'',//属性
k_moreruledata:[],
}
this.k_ruledata.push(ss);
},
k_addpro(item){//添加属性
let ss = {rule_id: '', rule_name: item.provaluse};
item.k_moreruledata.push(ss);
item.k_rule=true;
//添加完成后
item.provaluse="";
},
autodata() {//自动生成
//autoruledata
if (this.k_ruledata.length < 0) {
this.$message.info('请先添加');
return;
}
this.zum=[];
for (let index in this.k_ruledata) {//循环的次数
this.getDate(this.zum,this.k_ruledata[index]);
}
for(let index in this.zum){
this.zum[index].rule_id = "";
this.zum[index].rule_cost = '';//金额
this.zum[index].rule_unit = '';//库存
this.zum[index].rule_price = '';//成本价
}
this.autoruledata=this.zum;
console.log(this.autoruledata);
this.autodata_rule=true;
},
getDate(zum,first){//公共存的集合第一个集合
if(zum.length!=0){
let item = first.k_moreruledata;
let zumto=[];
for(let index in zum){
for(let to in item){
let ss={};
ss.rule_name=zum[index].rule_name+"/"+first.k_rule_name+":"+item[to].rule_name;
zumto.push(ss);
}
}
this.zum=zumto;
}else{
let item = first.k_moreruledata;
for(let index in item){
let ss={};
ss.rule_name=first.k_rule_name+":"+item[index].rule_name;
zum.push(ss);
}
this.zum=zum;
}
},
save() {
},
}
}
</script>
<style lang="scss" scoped>
</style>