表格合并操作,表格单项如何合并
本文主要详细介绍vue的表格合并功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue的表格合并功能的具体代码，供大家参考。具体内容如下
1、背景
有数据表是vue自己渲染的，但从整体考虑，还是需要合并列信息相同的单元格。
随着vue的使用，我认为MVVM是数据驱动的，所以我考虑操纵模型，而不是在渲染数据后做DOM操作。当然，我还是需要基本的CSS。因此，这种方法对所有人都有效
数据驱动的框架是有效的，比如Angular和React。最终实现效果如下：
2、思路
最初的范式是这样的：
桌子
四羟乙基己二酰胺
tr
Th设备/th
工作订单/th
Th产品型号/th
Th计划/实际/th
Th状态/th
Th估计生产数量/th
/tr
/thead
在需要分行下载处加上
tr v-for=测试数据中的项目
td{{ item.equipmentName }}/td
td{{ item.doCode}}/td
td{{ item.materialCode}}/td
td{{ item.productionNum}}/td
td{{ item.status}}/td
td{{ item.pNum}}/td
/tr
/tbody
/表格
先拿正常的表进行测试。原生td标记具有rowspan属性以支持单元格行合并。属性值是指向下合并了多少行，实际上相当于在这一行向下加了几个单元格。
因为，如果下一行要渲染的话，会被挤下去。因此，下面的合并单元格应该被显示隐藏：无；控制css就好。
因此，每个td标签需要有两个属性值，rowspan和display，以控制合并的行数和是否显示每个单元格。代码变成这样。
桌子
四羟乙基己二酰胺
tr
Th设备/th
工作订单/th
Th产品型号/th
Th计划/实际/th
Th状态/th
Th估计生产数量/th
/tr
/thead
在需要分行下载处加上
tr v-for=测试数据中的项目
TD:rowspan= item . equipment name span :class= { hidden:item . equipment name dis } { { item . equipment name } }/TD
TD:rowspan= item . docodespan :class= { hidden:item . docodedis } { { item . docode } }/TD
TD:rowspan= item . materialcodespan :class= { hidden:item . materialcodedis } { { item . materialcode } }/TD
TD:rowspan= item . production numspan :class= { hidden:item . production numdis } { { item . production num } }/TD
TD:rowspan= item . status span :class= { hidden:item . status dis } { { item . status } }/TD
TD:rowspan= item . pnumspan :class= { hidden:item . pnumdis } { { item . pnum } }/TD
/tr
/tbody
/表格
其中，这两个属性有一些特点：
要显示的单元格的rowspan值为1，记录下一个行数。
要显示的单元格显示为真。
不显示的下一个单元格是rowspan 1，display为false。
只有一行数据单元格rowspan为1，display为true。
其实是设计了一个算法。对于输入表数组，两个属性rowspan和display被添加到每个数据项，并且**rowspan的值被计算为
该列中相同值的行数，以及display的值是否根据rowspan的值显示* *，最后输出改变后的数组。
3、代码
函数组合单元格(列表){
for(列表[0]中的字段){
var k=0；
while (k list.length) {
list[k][field span ]=1；
list[k][field dis ]=false；
for(var I=k 1；I=list . length-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；
}否则{
打破；
}
}
k=I；
}
}
退货单；
}
写在最后。
实际上，代码非常简短。它主要依赖于kmp的思想。它定义了一个指针K，开始指向第一个值，然后向下比较。这样就设置了rowspan和display，如果遇到不同的值，就会判断为跳出。进行下一个循环，通知指针K把这个过程的行数加起来跳转，然后比较下一个单元格的值。和kmp的指针跳转判断同一个字符串是一样的原理。
函数combineCell()可以过滤网络请求返回的数据，附加相应的值，然后将值赋给vue监控的数组。
其实这个方法不仅适用于vue，也适用于数据驱动的框架，包括Angular和React。如果要合并表，可以过滤请求的值。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。