vue项目-添加商品的多规格

效果图

 

 

 

里面的一个难点就是 怎么生成数列，图一 是 4X3=12种组合  图二是   3X3X3=27种组合

怎么生成这种组合：思路

 

                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;

                 }




              },

下面是代码以及使用方法：

1.在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">规则名称：</s