js 通过多规格及每个规格对应多个规格值动态生成规格明细表格

⑧o年崋

已于 2022-06-15 16:50:51 修改

阅读量1.6k

点赞数

分类专栏： vue jquery 文章标签：规格 js vue 商品

于 2021-11-30 23:37:41 首次发布

本文链接：https://blog.csdn.net/xnlzg/article/details/121645380

版权

vue 同时被 2 个专栏收录

23 篇文章 3 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

动态表格如下：
在这里插入图片描述

       /**
       * 设置表格数据 该方法在新增规格、新增规格值、规格和规格值的文本改变都要调用
       */
      setTableList(){
         let newList=[];
         this.getRowList(null,0,newList)
         this.tableList=newList;
      },
      /**
       * 获取行数据 specList规格集合 tableList表格集合
       * @param specValues 多规格值通过逗号拼接组成每一行唯一值
       * @param specIndex 规格索引
       * @param newList 新表格数据
       */
      getRowList(specValues,specIndex,newList){
          if(specIndex<this.specList.length){
            this.specList[specIndex].values.forEach((t)=>{
              let newValues=(specValues===null?t.name:(specValues+","+t.name))
              //当前规格值，一直往下规格值循环完
              this.getRowList(newValues,specIndex+1,newList)
            })
            //当添加新规格（第二个规格的时候）没有规格值时，默认一个空值
            if(this.specList[specIndex].values.length===0 && specValues!==null){
              let newValues=specValues+","
              this.getRowList(newValues,specIndex+1,newList)
            }
          }
          //当最后规格的规格值循环到最后后添加行数据
          else{
           //判断表格行数据是否已经存在，存在直接添加不创建新行
            let row = this.tableList.find((r)=>{return r.specValues===specValues});
            if(row){
              newList.push({...row})
            }
            else{
              //默认的字段
              row = {
                specValues:specValues,
                amount:0,
                code:"",
                code_name:""
              }
              //通过规格值循环出规格值列数
              specValues.split(',').forEach((c,index)=>{
                row["sku-"+index]=c
              })
              newList.push(row);
            }
          }
      },