vue.js实现表格合并示例代码

前言

由于使用的是vue，想到MVVM是要用数据驱动的思想，所以考虑在模型做手脚，而不是渲染出数据来后做数字正射影像图操作，当然基本的半铸钢钢性铸铁(铸造半钢)还是要有的。因此这个方法对所有数据驱动的框架都有效，比如说有角的和做出反应。

最后的实现效果是这样的：

实现思路

原本的正常表格的代码长这样：

tr-v for=' items in items ' TD width=' 3% ' { { $ index 1 } }/TD TD TD TD width=' 15% ' { { item。BSo _ Name } }/TD TD宽度=' 8% ' :类=' { '加班' :加班(项目4 .GathDt)}'{{item .GathDt | time}}/td td宽度='5%'{{item .F1}}/td td宽度='5%'{{item .F2}}/td td宽度='5%'{{item .F4}}/td td宽度='5%'{{item .F3}}/td td宽度='5%'{{item .F5}}/td td宽度='5%'{{item .F6}}/td td宽度='5%'{{item .F7}}/td td宽度='5%'{{item .F8}}/td td宽度='5%'{{item .F9}}/td td宽度='5%'{{item .F10}}/td/tr先拿正常的表格来做测试，原生的任务描述标签就有rowspan属性支持单元格行合并，属性值指的是向下合并多少行，其实就相当于在本行中向下又添加了几个单元格。

因为，如果接下来的一行还会渲染的话就会被挤下去，因此，下面被合并的单元格要隐藏掉，通过显示器：无；钢性铸铁控制即可。

因此，每个任务描述标签需要带有两个属性值，rowspan和显示来控制每一个单元格的合并行数和是否显示。

代码变成这样了

tr-v-for=' items in items ' TD width=' 3% ' { $ index 1 } }/TD TD TD TD width=' 10% ' :行span=' item。BSO _名称跨度' :类=' {隐藏项目：BSO _ Namedis } ' { { item。BSO _名称} }/TD TD宽度=' 8% ' :行跨度='项.GathDtspan ' : class=' {隐藏项目：GathDtdis } ' : class=' {加班：加班（项. GathDt)}'{{item .GathDt | time } }/TD TD宽度=' 5% ' :行跨度=' item .f1 SPan ' : class=' {隐藏项目：f1 dis ' { { item .f1 } }/TD TD宽度=' 5% ' :行跨度='项.F2 SPan ' : class=' {隐藏项目：f2dis ' { { item .F2 } }/TD TD宽度=' 5% ' :行跨度='项.F3 SPan ' : class=' {隐藏项目：F3dis } ' { { item .F3 } }/TD TD宽度=' 5% ' :行跨度='项.F4 :隐藏项目.F4dis}'{{item .F4 } }/TD TD宽度=' 5% ' :行跨度='项.f5SPan ' : class=' {隐藏的：项.F5dis}'{{item .F5 } }/TD TD宽度=' 10% ' :行跨度='项.F6 SPan ' :=' {隐藏项目：F6dis}'{{item .F6 } }/TD TD宽度=' 8% ' :行跨度='项.F7 SPan ' :=' {隐藏项目：f7dis } ' : class=' {加班：加班（项F7)}'{{item .F7时间}}/td td宽度='5%' :rowspan='item .F8 SPan ' :=' {隐藏项目：F8dis}'{{item .F8 } }/TD TD宽度=' 5% ' :行跨度='项.F9 SPan ' : class=' {隐藏项目：F9dis}'{{item .F9 } }/TD TD宽度=' 5% ' :行跨度='项.F10 SPan ' :=' {隐藏项目：F10dis}'{{item .F10 } }/TD TD宽度=' 5% ' :行跨度='项.F11 span ' : class=' {隐藏项目：F11dis}'{{item .F11}}/td/tr其中，这两个属性有一些特征：

要显示的单元格rowspan为一的值，记录接下来的行数

要显示的单元格显示为真实的

接下来不显示的单元格rowspan为一且显示为错误的

只有一行数据的单元格rowspan为一且显示为真实的

实际上就是设计一个算法，对于输入的表格数组，每个数据项添加两个属性，rowspan和显示，并且计算出rowspan的值为

本列中以下相同值的行数，以及依据rowspan的值计算显示的值是否显示，最后将此改变后的数组输出。

解决示例代码

函数combineCell(列表){ for(列表[0]中的字段){ var k=0；while(k)列表。length){ list[k][field ' span ']=1；list[k][field ' dis ']=false；for(var I=k1；I=列表。长度-1；I){ if(list[k][field]==list[I][field]list[k][field]！=' '){ list[k][field ' span ']；list[k][field ' dis ']=false；list[I][field ' span ']=1；list[I][field ' dis ']=true；} else { break } } k=I；} }返回列表；}总结

其实代码很短很简单，主要依靠kmp的思想，定义一个指针k，开始指向第一个值，然后向下比较设置rowspan和display。

如果遇到不同的值，则判断跳出，进行下一个循环，通知指针k加上这个过程中计算的行数，跳转，然后比较下一个单元格的值，这和kmp的指针跳转判断同一字符串的原理是一样的。

函数combineCell()可以过滤网络请求的数据，附加相应的值，然后将值赋给vue监控的数组。

事实上，这种方法不仅适用于vue，也适用于数据驱动的框架，包括Angular和React。如果要合并表，请筛选请求的值，然后单击“确定”。

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。