表格既是一種可視化交流模式，也是一種組織整理數(shù)據(jù)的手段。所以在定義表格的類型時(shí)，需要考慮實(shí)際的業(yè)務(wù)場(chǎng)景，采用合適的表格呈現(xiàn)對(duì)應(yīng)的業(yè)務(wù)數(shù)據(jù)。本文總結(jié)了關(guān)于表格的多種類型和使用場(chǎng)景，一起來(lái)看一下吧。

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

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

這一期主要總結(jié)關(guān)于表格的多種類型和使用場(chǎng)景。表格對(duì)于我們來(lái)說(shuō)都不陌生，常用的excel也是表格的一種，只是excel是屬于工具類表格，而在B端系統(tǒng)中，會(huì)根據(jù)實(shí)際的業(yè)務(wù)場(chǎng)景定義不同的表格類型。

一、表格類型分類

以下我對(duì)自己在實(shí)際工作中運(yùn)用到的多種表格類型做了簡(jiǎn)單的歸納，如果大家還有其它的表格類型，希望在評(píng)論區(qū)可以補(bǔ)充。表格的類型我根據(jù)自己的理解進(jìn)行了簡(jiǎn)單的歸類，分為五種類型：

1. 常規(guī)型表格
2. 配置型表格
3. 多層級(jí)型表格
4. 擴(kuò)展型表格
5. 多表格組合型表格

1. 常規(guī)型表格

常規(guī)型表格：表格只做數(shù)據(jù)展示和維護(hù)，可支持增、刪、改、查等數(shù)據(jù)維護(hù)的功能操作，表格數(shù)據(jù)可采用分頁(yè)展示，分頁(yè)模式分為翻頁(yè)和分頁(yè)加載兩種形式，表格中又分為是否帶有選框，帶有選框的表格可支持批量操作。
如下圖是ant.design中的表格組件，表格右側(cè)帶有常規(guī)的數(shù)據(jù)功能操作，底部帶有分頁(yè)切換的組件，也是最常見(jiàn)的表格類型。

表格使用場(chǎng)景分析：

對(duì)于簡(jiǎn)單的數(shù)據(jù)展示和維護(hù)、不需要批量操作可采用常規(guī)型表格，分頁(yè)組件和加載分頁(yè)都可滿足常規(guī)表格的需求。

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

（帶操作，不帶選框）

（不帶操作，帶選框）

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

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

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

2. 配置型表格

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

（帶表頭顯示隱藏配置、表頭排序，不帶行排序、列固定、列行寬高設(shè)置）

下面分享一個(gè)我在實(shí)際項(xiàng)目中的完整配置型表格的設(shè)計(jì)，頁(yè)面的信息量有點(diǎn)大，表頭的顯示隱藏是通過(guò)點(diǎn)擊左上角的表頭設(shè)置出現(xiàn)下拉框，可以對(duì)表頭的字段進(jìn)行顯示、隱藏、排序、編輯、刪除的操作。

表頭的固定是通過(guò)列操作上的“固定列”實(shí)現(xiàn)的，點(diǎn)擊固定列后，對(duì)應(yīng)表頭列上會(huì)顯示圖釘，帶有圖釘?shù)牧袝?huì)顯示在表格前列，左右滑動(dòng)表格數(shù)據(jù)時(shí)，固定列不跟隨滑動(dòng)。

表格的列寬是直接拖拽分割線實(shí)現(xiàn)，行高則是通過(guò)頂上的行高配置實(shí)現(xiàn)，具體的交互這里就不講解了，實(shí)際業(yè)務(wù)比較復(fù)雜，常規(guī)的表格無(wú)法滿足該業(yè)務(wù)需求。

（帶表頭顯示隱藏配置、表頭排序、列固定、列行寬高設(shè)置，不帶行排序）

也有很多簡(jiǎn)單的配置型表格樣式，只需要配置列顯示和隱藏以及排序的功能，這列需求相對(duì)上面的案例簡(jiǎn)單很多，也更好設(shè)計(jì)和開(kāi)發(fā)實(shí)現(xiàn)。

（帶表頭顯示隱藏配置、表頭排序、列固定，不帶行排序、列行寬高設(shè)置）

3. 多層級(jí)型表格

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

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

（表頭多層級(jí)）

數(shù)據(jù)多層級(jí)時(shí)，一般通過(guò)樹(shù)結(jié)構(gòu)展示數(shù)據(jù)的層級(jí)關(guān)系，表格中可支持?jǐn)?shù)據(jù)的展開(kāi)和收起，方便查閱數(shù)據(jù)以及清晰的看到數(shù)據(jù)的層級(jí)關(guān)系。

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

4. 擴(kuò)展型表格

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

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

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

除了簡(jiǎn)單的行數(shù)據(jù)增減之外，表格中還可以支持多層級(jí)的數(shù)據(jù)增減功能，并且可以實(shí)現(xiàn)不同層級(jí)之間的排序功能，對(duì)于復(fù)雜場(chǎng)景的業(yè)務(wù)也能滿足。

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

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

5. 多表格組合型表格

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

表格鑲嵌小表格，也可以理解為多層級(jí)的表格，下圖中的屏幕可以理解為一級(jí)數(shù)據(jù)，展開(kāi)后展示該數(shù)據(jù)下的子集數(shù)據(jù)，只是子集數(shù)據(jù)是通過(guò)表格的形式展示，因?yàn)樽蛹臄?shù)據(jù)所展示的列數(shù)據(jù)信息與主數(shù)據(jù)的列信息不同，所以需要單獨(dú)展示，通過(guò)內(nèi)嵌表格的形式，可以很好的展示數(shù)據(jù)層級(jí)關(guān)系，并且數(shù)據(jù)的維護(hù)和查閱更方便。

二、結(jié)語(yǔ)

表格可細(xì)分為多種類型，不同的表格類型對(duì)應(yīng)的功能也具有較大的差異，在選擇表格類型時(shí)，需要根據(jù)實(shí)際業(yè)務(wù)需求選擇合適的表格，只要能滿足實(shí)際業(yè)務(wù)需求，簡(jiǎn)單的表格可滿足就不用選擇復(fù)雜的表格來(lái)實(shí)現(xiàn)。

表格中多種操作功能，也并不是都添加上就一定是最好的，總之根據(jù)實(shí)際需求選擇最適宜的即可，能夠滿足用戶需求的同時(shí)，還需要盡量地減少視覺(jué)噪點(diǎn)。