首先看下效果
这个sku组件主要的功能有，以表格形式展示sku，合并单元格，批量操作sku，过滤sku。接下来讲一些实现思路。使用版本是vue2.6.14
比如说现在有规格如下
首先要知道由上述规格最终能形成多少sku记录，很容易看出sku的总数就是规格的笛卡尔积，也就是3*3*2=18；通过表格table标签实现的话，也就是18行;
每行的列数就是规格的数量，所以可以想象出，根据这个规格信息应该绘制出的是18行*3列的这么一个表格。
通过规格信息得到行数和列数，得到如下的结果
，我们的目标则是
难点就是要计算出每个单元格应该展示的是哪个规格这个问题。首先可以确定的是每列展示的是对应的规格类型，比如第一列是展示第一个规格配置：颜色，第二列：内存，第三列：网络，而具体的规格值则跟行数相关。至于为什么是右图这种排列方式，那是因为后面要合并单元格，而且只有同规格的才能合并，所以就必须是这种排列方式。
我们先观察最后一列，可以发现，最后一列规格值的出现方式就是交替出现，就是按顺序不断的输出规格值。将行数与规格值索引放在一起看
第一行 ：0，0
第二行 ：1，1
第三行： 2，0
第四行： 3，1
....
那么可以看出输出的规则值应该是行数%规格数量，比如最后一列的规格一共有两个值，带入公式，上面的过程就是
第一行 ：0，0%2
第二行 ：1，1%2
第三行： 2，2%2
第四行： 3，3%2
....
好了，最后一列的处理是最简单的，现在我们在观察下第二列，他的出现也是循环出现规格，不一样的是他每个规格值出现的次数是2次，也就是64G出现2次，128G出现2次，256G出现2次，按这个顺序循环，那为什么是2呢，很明显那是因为第三列的规格数量是2，进而观察到在第一列这个值是6，可以看出当前列同规格的循环次数与后面列的规格数量相关，具体的关系则是当前列同一规格值的循环次数=后面列规格数量的笛卡尔积，第一列的6=第二列的规格数量（3）*第三列的规格数量（2） ；第二列的2=第三列的规格数量2*1；
所以以上述的例子而言，[3,3,2]的规格配置应该得到 [6,2,1]的合并策略，即第一列按6行一合并（循环）,第二列按2行一合并（循环），以第二例来看
第一行：0 ，0
第二行：1 ，0
第三行：2 ，1
第四行：3， 1
第五行：4， 2
第六行：5， 2
行数/合并数向上取整带入公式，上面的过程应该是
第一行：0 ，0/3
第二行：1 ，1/3
第三行：2 ，2/3
第四行：3， 3/3
第五行：4， 4/3
第六行：5， 5/3
接下来是进行合并单元格，采用的方式是以【6，2，1】的方式合并，对应的单元格上加上rowspan属性去合并，其他的单元格通过display:none全都隐藏掉，最终得到
有了这个做基础，后面的加上自定义sku属性，过滤，批量填充才可以继续进行下去，这里就不展开了，后面有空在更吧~
除此之外，我已经发布了一个vue组件，vue-sku-table，有兴趣可以去体验下！
github地址：https://github.com/sc1992sc/vue-sku-table