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

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

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

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

需求

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

思路

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

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

所以，針對(duì)每一行數(shù)據(jù) ，用rowspan和display來(lái)控制每一個(gè)單元格的合并行數(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>

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

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

然而，需求是復(fù)雜的。

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

先對(duì)月份處理，再對(duì)征期處理。

talk is cheap ，show you the code。

號(hào)稱(chēng)是算法，就倆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;
},

名字是拼音沒(méi)毛病，我也不想，人家大公司的規(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;
},

然后。