vue實現表格合併功能
本文例項為大家分享了vue實現表格合併功能的具體程式碼,供大家參考,具體內容如下
1、背景
本身有vue進行渲染的資料表格,,但是出於整體考慮,需要對相同的列資訊進行單元格合併。
由於使用的是vue,想到MVVM是要用資料驅動的思想,所以考慮在Model做手腳,而不是渲染出資料來後做DOM操作,當然基本的CSS還是要有的。因此這個方法對所有
資料驅動的框架都有效,比如說Angular和React。最後的實現效果是這樣的:
2、思路
原本的正常表格是這樣的:
<table > <thead> <tr> <th>裝置</th> <th>工單</th> <th>產品型號</th> <th>計劃/實際</th> <th>狀態</th> <th>預計生產數</th> </tr> </thead> <tbody> <tr v-for="item in testData"> <td>{{ item.equipmentName }}</td> <td>{{ item.doCode}}</td> <td>{{ item.materialCode}}</td> <td>{{ item.productionNum}}</td> <td>{{ item.status}}</td> <td>{{ item.pNum}}</td> </tr> </tbody> </table>
先拿正常的表格來做測試,原生的<td>標籤就有rowspan屬性支援單元格行合併,屬性值指的是向下合併多少行,其實就相當於在本行中向下又添加了幾個單元格。
因為,如果接下來的一行還會渲染的話就會被擠下去,因此,下面被合併的單元格要隱藏掉,通過display: none;css控制即可。
因此,每個<td>標籤需要帶有兩個屬性值,rowspan和display來控制每一個單元格的合併行數和是否顯示。程式碼變成這樣了
<table > <thead> <tr> <th>裝置</th> <th>工單</th> <th>產品型號</th> <th>計劃/實際</th> <th>狀態</th> <th>預計生產數</th> </tr> </thead> <tbody> <tr v-for="item in testData"> <td :rowspan="item.equipmentNamespan" :class="{hidden: item.equipmentNamedis}">{{ item.equipmentName }}</td> <td :rowspan="item.doCodespan" :class="{hidden: item.doCodedis}">{{ item.doCode}}</td> <td :rowspan="item.materialCodespan" :class="{hidden: item.materialCodedis}">{{ item.materialCode}}</td> <td :rowspan="item.productionNumspan" :class="{hidden: item.productionNumdis}">{{ item.productionNum}}</td> <td :rowspan="item.statusspan" :class="{hidden: item.statusdis}">{{ item.status}}</td> <td :rowspan="item.pNumspan" :class="{hidden: item.pNumdis}">{{ item.pNum}}</td> </tr> </tbody> </table>
其中,這兩個屬性有一些特徵:
要顯示的單元格rowspan為>1的值,記錄接下來的行數
要顯示的單元格display為true
接下來不顯示的單元格rowspan為1且display為false
只有一行資料的單元格rowspan為1且display為true
實際上就是設計一個演算法,對於輸入的表格陣列,每個資料項新增兩個屬性,rowspan和display,並且計算出**rowspan的值為
本列中以下相同值的行數,以及依據rowspan的值計算display的值是否顯示**,最後將此改變後的陣列輸出。
3、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。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。