vue.js實(shí)現(xiàn)表格合并示例代碼

更新時(shí)間：2016年11月30日 09:12:26 投稿：daisy

最近工作中遇到一個(gè)需求，是要做一個(gè)頁面放張大表格用來顯示數(shù)據(jù)項(xiàng)，純粹為了view層操作方便，就用了vue做渲染。然而又被提出了一個(gè)需求，需要相鄰的相同值的行數(shù)據(jù)項(xiàng)進(jìn)行單元格合并，這就醉了。沒辦法，只能想辦法解決，下面通過這篇文章來一起看看吧。

前言

由于使用的是vue，想到MVVM是要用數(shù)據(jù)驅(qū)動(dòng)的思想，所以考慮在Model做手腳，而不是渲染出數(shù)據(jù)來后做DOM操作，當(dāng)然基本的CSS還是要有的。因此這個(gè)方法對(duì)所有數(shù)據(jù)驅(qū)動(dòng)的框架都有效，比如說Angular和React。

最后的實(shí)現(xiàn)效果是這樣的：

實(shí)現(xiàn)思路

原本的正常表格的代碼長這樣：

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="15%">{{item.bsO_Name}}</td>
 <td width="8%" :class="{'overtime': overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%">{{item.F1}}</td>
 <td width="5%">{{item.F2}}</td>
 <td width="5%">{{item.F4}}</td>
 <td width="5%">{{item.F3}}</td>
 <td width="5%">{{item.F5}}</td>
 <td width="5%">{{item.F6}}</td>
 <td width="5%">{{item.F7}}</td>
 <td width="5%">{{item.F8}}</td>
 <td width="5%">{{item.F9}}</td>
 <td width="5%">{{item.F10}}</td>
</tr>

先拿正常的表格來做測(cè)試，原生的<td>標(biāo)簽就有rowspan屬性支持單元格行合并，屬性值指的是向下合并多少行，其實(shí)就相當(dāng)于在本行中向下又添加了幾個(gè)單元格。

因?yàn)?，如果接下來的一行還會(huì)渲染的話就會(huì)被擠下去，因此，下面被合并的單元格要隱藏掉，通過display: none; css控制即可。

因此，每個(gè)<td>標(biāo)簽需要帶有兩個(gè)屬性值，rowspan和display來控制每一個(gè)單元格的合并行數(shù)和是否顯示。

代碼變成這樣了

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="10%" :rowspan="item.bsO_Namespan" :class="{hidden: item.bsO_Namedis}">{{item.bsO_Name}}</td>
 <td width="8%" :rowspan="item.GathDtspan" :class="{hidden: item.GathDtdis}" :class="{overtime: overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%" :rowspan="item.F1span"  :class="{hidden: item.F1dis}">{{item.F1}}</td>
 <td width="5%" :rowspan="item.F2span"  :class="{hidden: item.F2dis}">{{item.F2}}</td>
 <td width="5%" :rowspan="item.F3span"  :class="{hidden: item.F3dis}">{{item.F3}}</td>
 <td width="5%" :rowspan="item.F4span"  :class="{hidden: item.F4dis}">{{item.F4}}</td>
 <td width="5%" :rowspan="item.F5span"  :class="{hidden: item.F5dis}">{{item.F5}}</td>
 <td width="10%" :rowspan="item.F6span"  :class="{hidden: item.F6dis}">{{item.F6}}</td>
 <td width="8%" :rowspan="item.F7span"  :class="{hidden: item.F7dis}" :class="{overtime: overtime(item.F7)}">{{item.F7 | time}}</td>
 <td width="5%" :rowspan="item.F8span"  :class="{hidden: item.F8dis}">{{item.F8}}</td>
 <td width="5%" :rowspan="item.F9span"  :class="{hidden: item.F9dis}">{{item.F9}}</td>
 <td width="5%" :rowspan="item.F10span"  :class="{hidden: item.F10dis}">{{item.F10}}</td>
 <td width="5%" :rowspan="item.F11span"  :class="{hidden: item.F11dis}">{{item.F11}}</td>
</tr>

其中，這兩個(gè)屬性有一些特征：

要顯示的單元格rowspan為>1的值，記錄接下來的行數(shù)

要顯示的單元格display為true

接下來不顯示的單元格rowspan為1且display為false

只有一行數(shù)據(jù)的單元格rowspan為1且display為true

實(shí)際上就是設(shè)計(jì)一個(gè)算法，對(duì)于輸入的表格數(shù)組，每個(gè)數(shù)據(jù)項(xiàng)添加兩個(gè)屬性，rowspan和display，并且計(jì)算出rowspan的值為

本列中以下相同值的行數(shù)，以及依據(jù)rowspan的值計(jì)算display的值是否顯示，最后將此改變后的數(shù)組輸出。

解決示例代碼

function combineCell(list) {
 for (field in list[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;
    } else {
     break;
    }
   }
   k = i;
  }
 }
 return list;
}

總結(jié)

代碼實(shí)際上很短很簡單，主要借助的是kmp的思想，定義一個(gè)指針k，開始指向第一個(gè)值，然后向下比較，以此對(duì)rowspan和display設(shè)置，

若遇到不相同的值則判斷為跳出，進(jìn)行下一個(gè)循環(huán)，通知指針k加上這個(gè)過程中運(yùn)算的行數(shù)，進(jìn)行跳轉(zhuǎn)，然后比較下一個(gè)單元格的值，和kmp的指針跳轉(zhuǎn)判斷相同字符串一樣的原理。

通過combineCell()這個(gè)函數(shù)就可以將網(wǎng)絡(luò)請(qǐng)求回來的數(shù)據(jù)進(jìn)行過濾，附加上相應(yīng)的值后再對(duì)vue監(jiān)視的數(shù)組進(jìn)行賦值操作就可以了。

實(shí)際上此方法不僅適用于vue，數(shù)據(jù)驅(qū)動(dòng)的框架都可以，包括Angular和React，要想實(shí)現(xiàn)表格合并，對(duì)請(qǐng)求回來的值過濾一下就OK。

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: