超多案例！B端系統的表格類型全面總結

前言

在 B 端多年滾爬后，也接觸了多種客戶需求，并且不同的客戶具有不同的業務，不同的業務在實際需求上也存在較大的差異，所以一些常規的組件并不能滿足所有的客戶需求，需要根據實際需求設計出不同的組件，以此達到客戶的實際需求。

表格既是一種可視化交流模式，又是一種組織整理數據的手段。目的是為了更好的查閱數據、統計數據、維護數據。所以在定義表格的類型時，需要考慮實際的業務場景，采用合適的表格呈現對應的業務數據，可以讓用戶更好的理解業務數據，高效的維護數據。

這一期主要總結關于表格的多種類型和使用場景。表格對于我們來說都不陌生，常用的 excel 也是表格的一種，只是 excel 是屬于工具類表格，而在 B 端系統中，會根據實際的業務場景定義不同的表格類型。

更多表格干貨：

表格類型分類

以下我對自己在實際工作中運用到的多種表格類型做了簡單的歸納，如果大家還有其它的表格類型，希望在評論區可以補充。表格的類型我根據自己的理解進行了簡單的歸類，分為五種類型：

1. 常規型表格
2. 配置型表格
3. 多層級型表格
4. 擴展型表格
5. 多表格組合型表格

1. 常規型表格

常規型表格：表格只做數據展示和維護，可支持增、刪、改、查等數據維護的功能操作，表格數據可采用分頁展示，分頁模式分為翻頁和分頁加載兩種形式，表格中又分為是否帶有選框，帶有選框的表格可支持批量操作。

Ant.design 中的表格組件，表格右側帶有常規的數據功能操作，底部帶有分頁切換的組件，也是最常見的表格類型。

表格使用場景分析：

對于簡單的數據展示和維護、不需要批量操作可采用常規型表格，分頁組件和加載分頁都可滿足常規表格的需求。

如果數據只做展示，那么選框和操作列都去掉即可。

帶操作，不帶選框

不帶操作，帶選框

如果需要支持表格中數據的排序、搜索、篩選功能，那么就需要在表頭列數據位置增加對應的功能。表格中的多種操作功能都可以搭配使用，只要根據實際的業務需求增減表格的操作即可。

帶篩選和排序，不帶搜索

帶排序和搜索，不帶篩選

2. 配置型表格

配置型表格：在常規表格基礎上，可滿足表格的多項自定義配置，可調整表格中數據的排序，可調整表頭的列數據展示或者隱藏，可設置列固定位置不跟隨左右移動，可調整列寬度和行高度。

帶表頭顯示隱藏配置、表頭排序，不帶行排序、列固定、列行寬高設置

下面分享一個我在實際項目中的完整配置型表格的設計，頁面的信息量有點大，表頭的顯示隱藏是通過點擊左上角的表頭設置出現下拉框，可以對表頭的字段進行顯示、隱藏、排序、編輯、刪除的操作。

表頭的固定是通過列操作上的”固定列“實現的，點擊固定列后，對應表頭列上會顯示圖釘，帶有圖釘的列會顯示在表格前列，左右滑動表格數據時，固定列不跟隨滑動。

表格的列寬是直接拖拽分割線實現，行高則是通過頂上的行高配置實現，具體的交互這里就不講解了，實際業務比較復雜，常規的表格無法滿足該業務需求。

帶表頭顯示隱藏配置、表頭排序、列固定、列行寬高設置，不帶行排序

也有很多簡單的配置型表格樣式，只需要配置列顯示和隱藏以及排序的功能，這列需求相對上面的案例簡單很多，也更好設計和開發實現。

帶表頭顯示隱藏配置、表頭排序、列固定，不帶行排序、列行寬高設置

3. 多層級型表格

多層級型表格：多層級可分為表頭多層級和數據行多層級。

下圖是表頭多層級，一級表頭占據寬度是下一級表頭之和，下下級再逐漸遞增，實現多層級的表頭設置，上面的配置型表格的案例截圖也是屬于多層級表頭的類型，可結合一起查看。

表頭多層級

數據多層級時，一般通過樹結構展示數據的層級關系，表格中可支持數據的展開和收起，方便查閱數據以及清晰的看到數據的層級關系

數據多層級

4. 擴展型表格

擴展型表格：支持表格行數據和列數據的自定義增減。

數據維護需求中可支持在表格中直接添加數據，在表格中直接輸入信息并保存，不需要通過彈窗或者頁面的形式來增加一條數據。通過“添加一行數據”實現新增一行數據，編輯完成后直接生成數據信息。這樣的交互對于用戶的理解和使用更加簡單，并且可以更加快速高效的完成數據的維護。

支持行數據增減

除了簡單的行數據增減之外，表格中還可以支持多層級的數據增減功能，并且可以實現不同層級之間的排序功能，對于復雜場景的業務也能滿足。

支持行數據增減、支持層級數據增減、支持行數據排序

表格中的列數據也可以通過自定義添加，并且可以支持多種數據類型，下圖中的案例是滿足列數據和行數據都可以添加的場景，并且數據可支持多種形式，不過這樣的表格組件相對于比較復雜，開發也比較有難度，小型需求場景也比較少運用到，一般會作為主要的模塊設計。

5. 多表格組合型表格

多表格組合型表格：支持表格中鑲嵌小表格，多個表格組合的形式。

表格鑲嵌小表格，也可以理解為多層級的表格，下圖中的屏幕可以理解為一級數據，展開后展示該數據下的子集數據，只是子集數據是通過表格的形式展示，因為子集的數據所展示的列數據信息與主數據的列信息不同，所以需要單獨展示，通過內嵌表格的形式，可以很好的展示數據層級關系，并且數據的維護和查閱更方便。

結語

表格可細分為多種類型，不同的表格類型對應的功能也具有較大的差異，在選擇表格類型時，需要根據實際業務需求選擇合適的表格，只要能滿足實際業務需求，簡單的表格可滿足就不用選擇復雜的表格來實現，表格中多種操作功能，也并不是都添加上就一定是最好的，總之根據實際需求選擇最適宜的即可，能夠滿足用戶需求的同時，還需要盡量的減少視覺噪點。

歡迎關注作者的微信公眾號：「設計小余」