中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

一、表格類型分類

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

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

1. 常規(guī)型表格

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

表格使用場景分析：

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

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

（帶操作，不帶選框）

（不帶操作，帶選框）

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

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

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

2. 配置型表格

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

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

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

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

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

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

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

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

3. 多層級型表格

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

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

（表頭多層級）

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

（數(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)不同層級之間的排序功能，對于復(fù)雜場景的業(yè)務(wù)也能滿足。

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

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

5. 多表格組合型表格

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

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

二、結(jié)語

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

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