前言
由于使用的是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="{'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的值是否顯示，最后將此改變后的數組輸出。
解決示例代碼
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;}總結
代碼實際上很短很簡單，主要借助的是kmp的思想，定義一個指針k，開始指向第一個值，然后向下比較，以此對rowspan和display設置，
若遇到不相同的值則判斷為跳出，進行下一個循環，通知指針k加上這個過程中運算的行數，進行跳轉，然后比較下一個單元格的值，和kmp的指針跳轉判斷相同字符串一樣的原理。
通過combineCell()這個函數就可以將網絡請求回來的數據進行過濾，附加上相應的值后再對vue監視的數組進行賦值操作就可以了。
實際上此方法不僅適用于vue，數據驅動的框架都可以，包括Angular和React，要想實現表格合并，對請求回來的值過濾一下就OK。
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
