vue.js實作表格合併範例程式碼

前言

由於使用的是vue，想到MVVM是要用資料驅動的思想，所以考慮在Model做手腳，而不是渲染出資料來後做DOM操作，當然基本的CSS還是要有的。因此這個方法對所有資料驅動的框架都有效，比如說Angular和React。

實現想法

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

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="15%">{{item.bsO_Name}}</td>
 <td width="8%" :class="{&#39;overtime&#39;: 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>

先拿正常的表格來做測試，原生的

標籤就有rowspan屬性支援單元格行合併，屬性值指的是向下合併多少行，其實就等於在本行中向下又增加了幾個儲存格。

因為，如果接下來的一行還會渲染的話就會被擠下去，因此，下面被合併的單元格要隱藏掉，通過display: none; css控制即可。

因此，每個

標籤需要帶有兩個屬性值，rowspan和display來控制每個單元格的合併行數和是否顯示。

程式碼變成這樣了

<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>

   

其中，這兩個屬性有一些特徵：

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

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

單元格display為true

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

只有一行資料的單元格rowspan為1且display為true

實際上就是設計一個演算法，對於輸入的表格數組，每個資料項增加兩個屬性，rowspan和display，並且計算出rowspan的值為

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

解決範例程式碼

function combineCell(list) {
 for (field in list[0]) {
  var k = 0;
  while (k < list.length) {
   list[k][field + &#39;span&#39;] = 1;
   list[k][field + &#39;dis&#39;] = false;
   for (var i = k + 1; i <= list.length - 1; i++) {
    if (list[k][field] == list[i][field] && list[k][field] != &#39;&#39;) {
     list[k][field + &#39;span&#39;]++;
     list[k][field + &#39;dis&#39;] = false;
     list[i][field + &#39;span&#39;] = 1;
     list[i][field + &#39;dis&#39;] = true;
    } else {
     break;
    }
   }
   k = i;
  }
 }
 return list;
}

   

總結

程式碼其實很短很簡單，主要藉助的是kmp的思想，定義一個指針k，開始指向第一個值，然後向下比較，以此對rowspan和display設置，

若遇到不相同的值則判斷為跳出，進行下一個循環，通知指針k加上這個過程中運算的行數，進行跳轉，然後比較下一個單元格的值，和kmp的指標跳轉判斷相同字串一樣的原理。

透過combineCell()這個函數就可以將網路請求回來的資料過濾，附加上對應的值後再對vue監視的陣列進行賦值運算就可以了。

實際上此方法不僅適用於vue，資料驅動的框架都可以，包括Angular和React，要想實現表格合併，對請求回來的值過濾一下就OK。

🎜