vue通过数据过滤实现表合并

基于vue，通过数据过滤实现表合并，供大家参考。具体内容如下

需求

基于vue呈现的数据表需要合并相同的列

自从使用vue以后，我就不想再直接操作dom节点了，所以还是对数据进行操作。

合并单元格需要Rowspan属性。所有的想法都是在数据中添加rowspan属性，以多行显示，但是渲染后会重复下面的行，所以它们是隐藏的。

因此，对于每一行数据，rowspan和display用于控制合并行数以及是否显示每个单元格

密码

table id=' search _ table ' class=' table-table-bordered table-striped ' cell spacing=' 0 ' width=' 100% ' the DTR class=' table _ BG ' th class=' colspan=' 12 '周期日历字母Interest/th/tr class=' cell _ BG ' th class=' style='月/th class='征收期/th class=' style='缴款期/th class=' style='税种/th/tr/the d tbbody id=' TBT index)在结果“TD : row span=' I . yd span ' : class=' { hidden : I . yd dis } ' class=' text-center ' { I . yd } }/TD : row span=' I . zqspan ' : class=' { hidden : I . zqdis } ' { { I . zq } }/TD TD-: row span=' I . jkqspan ' 33336

然后，设计一个算法，给每个数据项添加rowspan和hidden两个属性，用于渲染表的数组，将rowspan值计算为该列中具有相同值的行数，(当然，数据在sql中通过group by传递)，根据rowspan值计算hidden值是否显示true/false，最后输出更改后的数组。

然而，需求是复杂的。

如图，要求第二列不能跨第一列的维度合并，没有办法一劳永逸的处理，只能单独处理

先处理月份，再处理签期。

说话很便宜，给你看看代码。

称为算法，只有两个用于循环

combinezq 3360 function(list){ var k=0；let字段=' zqwhile(k list . length){ list[k][field ' span ']=1；list[k][field ' dis ']=false；for(var I=k1；I=list . length-1；I){ if(list[k][field]==list[I][field]list[k][field]！=' list[k][' yd ']==list[I][' yd ']list[k][' yd ']！=' '){ list[k][field ' span ']；list[k][field ' dis ']=false；list[I][field ' span ']=1；list[I][field ' dis ']=true；} else { break} } k=I；}返回列表；}，名字是拼音，我不想。这是大公司的标准(-，-)

combineyd : function(list){ var k=0；让字段=' ydwhile(k list . length){ list[k][field ' span ']=1；list[k][field ' dis ']=false；for(var I=k1；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；} else { break} } k=I；}返回列表；}，然后。

就这样。

渲染：前两列在此合并

就是这样，一个即将成为前端的后台程序员

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。