首先看下效果
這個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