vue实现sku表格

首先看下效果

 

 

这个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

 

posted @   疯魔掉书袋  阅读(2181)  评论(2编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示