2023年B端系統(tǒng)之表格的類型和使用場景

B端系統(tǒng)之表格的類型和使用場景class="aligncentersize-fullwp-image-5760724"src="/wp-files/2023/02/3gEcVJADLuAGolSOqKVV.png"alt=""width="900"height="420"/>

在B端多年滾爬后，也接觸了多種客戶需求，并且不同的客戶具有不同的業(yè)務，不同的業(yè)務在實際需求上也存在較大的差異，所以一些常規(guī)的組件并不能滿意全部的客戶需求，需要依據(jù)實際需求設計出不同的組件，以此達到客戶的實際需求。

表格既是一種可視化溝通模式，又是一種組織整理數(shù)據(jù)的手段。目的是為了更好的查閱數(shù)據(jù)、統(tǒng)計數(shù)據(jù)、維護數(shù)據(jù)。所以在定義表格的類型時，需要考慮實際的業(yè)務場景，采納合適的表格呈現(xiàn)對應的業(yè)務數(shù)據(jù)，可以讓用戶更好的理解業(yè)務數(shù)據(jù)，高效的維護數(shù)據(jù)。

這一期主要總結(jié)關于表格的多種類型和使用場景。表格對于我們來說都不生疏，常用的excel也是表格的一種，只是excel是屬于工具類表格，而在B端系統(tǒng)中，會依據(jù)實際的業(yè)務場景定義不同的表格類型。

一、表格類型分類

以下我對自己在實際工作中運用到的多種表格類型做了簡潔的歸納，假如大家還有其它的表格類型，盼望在評論區(qū)可以補充。表格的類型我依據(jù)自己的理解進行了簡潔的歸類，分為五種類型：

常規(guī)型表格配置型表格多層級型表格擴展型表格多表格組合型表格

1.常規(guī)型表格

常規(guī)型表格：表格只做數(shù)據(jù)展現(xiàn)和維護，可支持增、刪、改、查等數(shù)據(jù)維護的功能操作，表格數(shù)據(jù)可采納分頁展現(xiàn)，分頁模式分為翻頁和分頁加載兩種形式，表格中又分為是否帶有選框，帶有選框的表格可支持批量操作。

如下圖是ant.design中的表格組件，表格右側(cè)帶有常規(guī)的數(shù)據(jù)功能操作，底部帶有分頁切換的組件，也是最常見的表格類型。

表格使用場景分析：

對于簡潔的數(shù)據(jù)展現(xiàn)和維護、不需要批量操作可采納常規(guī)型表格，分頁組件和加載分頁都可滿意常規(guī)表格的需求。

假如數(shù)據(jù)只做展現(xiàn)，那么選框和操作列都去掉即可。

（帶操作，不帶選框）

（不帶操作，帶選框）

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

（帶篩選和排序，不帶搜尋）

（帶排序和搜尋，不帶篩選）

2.配置型表格

配置型表格：在常規(guī)表格基礎上，可滿意表格的多項自定義配置，可調(diào)整表格中數(shù)據(jù)的排序，可調(diào)整表頭的列數(shù)據(jù)展現(xiàn)或者隱蔽，可設置列固定位置不跟隨左右移動，可調(diào)整列寬度和行高度。

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

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

表頭的固定是通過列操作上的“固定列”實現(xiàn)的，點擊固定列后，對應表頭列上會顯示圖釘，帶有圖釘?shù)牧袝@示在表格前列，左右滑動表格數(shù)據(jù)時，固定列不跟隨滑動。

表格的列寬是直接拖拽分割線實現(xiàn)，行高則是通過頂上的行高配置實現(xiàn)，詳細的交互這里就不講解了，實際業(yè)務比較簡單，常規(guī)的表格無法滿意該業(yè)務需求。

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

也有許多簡潔的配置型表格樣式，只需要配置列顯示和隱蔽以及排序的功能，這列需求相對上面的案例簡潔許多，也更好設計和開發(fā)實現(xiàn)。

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

3.多層級型表格

多層級型表格：多層級可分為表頭多層級和數(shù)據(jù)行多層級。

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

（表頭多層級）

數(shù)據(jù)多層級時，一般通過樹結(jié)構(gòu)展現(xiàn)數(shù)據(jù)的層級關系，表格中可支持數(shù)據(jù)的綻開和收起，便利查閱數(shù)據(jù)以及清楚的看到數(shù)據(jù)的層級關系。

（數(shù)據(jù)多層級）

4.擴展型表格

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

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

（支持行數(shù)據(jù)增減）

除了簡潔的行數(shù)據(jù)增減之外，表格中還可以支持多層級的數(shù)據(jù)增減功能，并且可以實現(xiàn)不同層級之間的排序功能，對于簡單場景的業(yè)務也能滿意。

（支持行數(shù)據(jù)增減、支持層級數(shù)據(jù)增減、支持行數(shù)據(jù)排序）

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

5.多表格組合型表格

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

表格鑲嵌小表格，也可以理解為多層級的表格，下圖中的屏幕可以理解為一級數(shù)據(jù)，綻開后展現(xiàn)該數(shù)據(jù)下的子集數(shù)據(jù)，只是子集數(shù)據(jù)是通過表格的形式展現(xiàn)，由于子集的數(shù)據(jù)所展現(xiàn)的列數(shù)據(jù)信息與主數(shù)據(jù)的列信息不同，所以需要單獨展現(xiàn)，通過內(nèi)嵌表格的形式，可以很好的展現(xiàn)數(shù)據(jù)層級關系，并且數(shù)據(jù)的維護和查閱更便利。

二、結(jié)語

表格可細分為多種類型，不同的表格類型對應的功能也具有較大的差異，在選擇表格類型