vue實現表格合并

zhangrxiang 發布于2019-08-22 10:44 / 1692人閱讀

摘要：因為，如果接下來的一行還會渲染的話就會被擠下去，因此，下面被合并的單元格要隱藏掉，通過控制即可。因此，每個標簽需要帶有兩個屬性值，和來控制每一個單元格的合并行數和是否顯示。

1. 場景

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

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

2. 思路

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


    {{ $index + 1 }}
    {{item.bsO_Name}}
    {{item.GathDt | time}}
    {{item.F1}}
    {{item.F2}}
    {{item.F4}}
    {{item.F3}}
    {{item.F5}}
    {{item.F6}}
    {{item.F7}}
    {{item.F8}}
    {{item.F9}}
    {{item.F10}}

先拿正常的表格來做測試，原生的標簽就有rowspan屬性支持單元格行合并，屬性值指的是向下合并多少行，其實就相當于在本行中向下又添加了幾個單元格。
因為，如果接下來的一行還會渲染的話就會被擠下去，因此，下面被合并的單元格要隱藏掉，通過display: none;css控制即可。

因此，每個標簽需要帶有兩個屬性值，rowspan和display來控制每一個單元格的合并行數和是否顯示。代碼變成這樣了


    {{ $index + 1 }}
    {{item.bsO_Name}}
    {{item.GathDt | time}}
    {{item.F1}}
    {{item.F2}}
    {{item.F3}}
    {{item.F4}}
    {{item.F5}}
    {{item.F6}}
    {{item.F7 | time}}
    {{item.F8}}
    {{item.F9}}
    {{item.F10}}
    {{item.F11}}

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

要顯示的單元格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

GPU云服務器云服務器表格合并 python合并表格怎么合并表格html html表格合并線

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91157.html

vue-split-table【表格合并和編輯插件】

摘要：前言應用的效果圖開源地址歡迎現在已經開源和同步到上輕松搞定表格拆分或者合并編輯再也不怕被產品懟啦核心源碼分析里面嵌套實現表格拆分原生實現復選框的單選和全選功能屬性像父組件暴露屬性值自定義事件方法向父組件傳值作用域插槽由父向子傳入標前言 vue-split-table應用的效果圖 showImg(https://segmentfault.com/img/bVbivFU?w=1377&h...

qianfeng 2019-08-23 12:29 評論0 收藏0
vue elementUI table 自定義表頭和行合并

摘要：最近項目中做表格比較多，對表格的使用，只需要傳遞進去數據，然后寫死表頭即可渲染。該函數可以返回一個包含兩個元素的數組，第一個元素代表，第二個元素代表。也可以返回一個鍵名為和的對象。最近項目中做表格比較多，對element表格的使用，只需要傳遞進去數據，然后寫死表頭即可渲染。但現實中應用中，如果寫死表頭，并且每個組件中寫自己的表格，不僅浪費時間而且消耗性能。這個時候需要動態渲染表頭。...

funnyZhang 2019-08-26 13:53 評論0 收藏0
原生Js-msi系統

摘要：我也意識到在學習一個框架前，將框架的思想和原生的實現進行對比有多么重要。這個是目前為止一個大的框架思路，當然還要再進行每個功能的細分。表格將上一步的并集數據顯示出來渲染分表格，表格有一個表頭，用于展示商品的種類地區以及每月的銷售情況。前言：由于剛入前端時間并不長，之前最近一直處在學習的階段，現在準備找工作，回首看看之前學的，發現了很多的瑕疵。我分析覺得主要原因在于之前有些東西學的太快...

K_B_Z 2019-08-23 10:54 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...

soasme 2019-08-02 16:07 評論0 收藏0