vue實現表格合併

1. 場景

這兩天一個項目，屬於子需求吧，就是要作一個頁面放個簡單的banner下面是張大表格用來顯示數據項，純粹爲了view層操做方便，就用了vue作渲染。
然而，對方最近又提出了一個噁心需求，須要相鄰的相同值的行數據項進行單元格合併，這就醉了。

因爲使用的是vue，想到MVVM是要用數據驅動的思想，因此考慮在Model作手腳，而不是渲染出數據來後作DOM操做，固然基本的CSS仍是要有的。所以這個方法對全部
數據驅動的框架都有效，好比說Angular和React。最後的實現效果是這樣的：

2. 思路

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

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

先拿正常的表格來作測試，原生的<td>標籤就有rowspan屬性支持單元格行合併，屬性值指的是向下合併多少行，其實就至關於在本行中向下又添加了幾個單元格。
由於，若是接下來的一行還會渲染的話就會被擠下去，所以，下面被合併的單元格要隱藏掉，經過display: none;css控制便可。

所以，每一個<td>標籤須要帶有兩個屬性值，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的值，記錄接下來的行數

• 要顯示的單元格display爲true

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

• 只有一行數據的單元格rowspan爲1且display爲true

實際上就是設計一個算法，對於輸入的表格數組，每一個數據項添加兩個屬性，rowspan和display，而且計算出**rowspan的值爲
本列中如下相同值的行數，以及依據rowspan的值計算display的值是否顯示**，最後將此改變後的數組輸出。

3. show me code

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

4. 總結

代碼實際上很短很簡單，主要藉助的是kmp的思想，定義一個指針k，開始指向第一個值，而後向下比較，以此對rowspan和display設置，
若遇到不相同的值則判斷爲跳出，進行下一個循環，通知指針k加上這個過程當中運算的行數，進行跳轉，而後比較下一個單元格的值，和kmp的指針跳轉判斷相同字符串同樣的原理。

經過combineCell()這個函數就能夠將網絡請求回來的數據進行過濾，附加上相應的值後再對vue監視的數組進行賦值操做就能夠了。
實際上此方法不只適用於vue，數據驅動的框架均可以，包括Angular和React，要想實現表格合併，對請求回來的值過濾一下就OK。

原文連接：原文 歡迎訪問本人博客：House of Cards