vue通過數(shù)據(jù)過濾實現(xiàn)表格合并

更新時間：2020年11月30日 15:16:53 作者：天邊龍一條

這篇文章主要為大家詳細介紹了vue通過數(shù)據(jù)過濾實現(xiàn)表格合并，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

基于vue通過數(shù)據(jù)過濾實現(xiàn)表格合并，供大家參考，具體內(nèi)容如下

需求

基于vue渲染的數(shù)據(jù)表格
需要對相同的列進行合并

思路

自從使用了vue，就再也不想直接操作dom節(jié)點了，所以還是對數(shù)據(jù)操作。

要合并單元格需要用到rowspan屬性，所有想法是針對數(shù)據(jù)添加rowspan屬性使其多行顯示，但下面的行再去渲染就重復了，所以用hidden 隱藏掉。

所以，針對每一行數(shù)據(jù) ，用rowspan和display來控制每一個單元格的合并行數(shù)和是否顯示

代碼

<table id="search_table" class="table table-bordered table-striped" cellspacing="0" width="100%">
 <thead>
 <tr class="table_bg">
 <th class="" colspan="12">征期日歷信息</th>
 </tr>
 <tr class="cell_bg">
 <th class="" style="">月份</th>
 <th class="" style="" >征期</th>
 <th class="" style="" >繳款期</th>
 <th class="" style="" >稅種</th>
 </tr>
 </thead>
 <tbody id="tbody">

 <tr class="" v-for="(i,index) in result">
 <td :rowspan="i.ydspan" :class="{hidden: i.yddis}" class="text-center">
 {{i.yd}}
 </td>
 <td :rowspan="i.zqspan" :class="{hidden: i.zqdis}">
 {{i.zq}}
 </td>
 <td <%--:rowspan="i.jkqspan" :class="{hidden: i.jkqdis}"--%>>
 {{i.jkq}}
 </td>
 <td>
 {{i.sz}}
 </td>
 </tr>
 </tbody>
</table>

這里，對需要合并的單元格添加 :rowspan=”i.ydspan” :class=”{hidden: i.yddis}”

接著，設(shè)計一個算法，對用于渲染table渲染的數(shù)組，每個數(shù)據(jù)項添加兩個屬性，rowspan和hidden，計算出rowspan的值為本列中該值相同的行數(shù)，（當然，數(shù)據(jù)在sql中是經(jīng)過group by的）以及依據(jù)rowspan的值計算hidden的值是否顯示true/false，最后將此改變后的數(shù)組輸出。

然而，需求是復雜的。

如圖，要求第二列不能跨過第一列的維度合并，所以，沒有辦法一勞永逸，只能分別處理

先對月份處理，再對征期處理。

talk is cheap ，show you the code。

號稱是算法，就倆for 循環(huán)

combineZQ:function (list) {
 var k = 0;
 let field ="zq";
 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]['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;
 }
 return list;
},

名字是拼音沒毛病，我也不想，人家大公司的規(guī)范（-，-）

combineYd:function (list) {
 var k = 0;
 let field ="yd";
 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;
  } else {
 break;
 }
 }
 k = i;
 }
 return list;
},

然后。