B端系统之表格的类型和运用场景

在B端多年滚爬后，也打仗了多种客户需求，并且不同的客户具有不同的业务，不同的业务在实际需求上也存在较大的差异，以是一些常规的组件并不能知足所有的客户需求，须要根据实际需求设计出不同的组件，以此达到客户的实际需求。

表格既是一种可视化互换模式，又是一种组织整理数据的手段。
目的是为了更好的查阅数据、统计数据、掩护数据。
以是在定义表格的类型时，须要考虑实际的业务场景，采取得当的表格呈现对应的业务数据，可以让用户更好的理解业务数据，高效的掩护数据。

这一期紧张总结关于表格的多种类型和利用场景。
表格对付我们来说都不陌生，常用的excel也是表格的一种，只是excel是属于工具类表格，而在B端系统中，会根据实际的业务场景定义不同的表格类型。

一、表格类型分类

以下我对自己在实际事情中利用到的多种表格类型做了大略的归纳，如果大家还有其它的表格类型，希望在评论区可以补充。
表格的类型我根据自己的理解进行了大略的归类，分为五种类型：

常规型表格：表格只做数据展示和掩护，可支持增、删、改、查等数据掩护的功能操作，表格数据可采取分页展示，分页模式分为翻页和分页加载两种形式，表格中又分为是否带有选框，带有选框的表格可支持批量操作。
如下图是ant.design中的表格组件，表格右侧带有常规的数据功能操作，底部带有分页切换的组件，也是最常见的表格类型。

表格利用场景剖析：

对付大略的数据展示和掩护、不须要批量操作可采取常规型表格，分页组件和加载分页都可知足常规表格的需求。

如果数据只做展示，那么选框和操作列都去掉即可。

（带操作，不带选框）

（不带操作，带选框）

如果须要支持表格中数据的排序、搜索、筛选功能，那么就须要在表头列数据位置增加对应的功能。
表格中的多种操作功能都可以搭配利用，只要根据实际的业务需求增减表格的操作即可。

（带筛选和排序，不带搜索）

（带排序和搜索，不带筛选）

2. 配置型表格

配置型表格：在常规表格根本上，可知足表格的多项自定义配置，可调度表格中数据的排序，可调度表头的列数据展示或者隐蔽，可设置列固定位置不跟随旁边移动，可调度列宽度和行高度。

（带表头显示隐蔽配置、表头排序，不带行排序、列固定、列行宽高设置）

下面分享一个我在实际项目中的完全配置型表格的设计，页面的信息量有点大，表头的显示隐蔽是通过点击左上角的表头设置涌现下拉框，可以对表头的字段进行显示、隐蔽、排序、编辑、删除的操作。

表头的固定是通过列操作上的“固定列”实现的，点击固定列后，对应表头列上会显示图钉，带有图钉的列会显示在表格前列，旁边滑动表格数据时，固定列不跟随滑动。

表格的列宽是直接拖拽分割线实现，行高则是通过顶上的行高配置实现，详细的交互这里就不讲解了，实际业务比较繁芜，常规的表格无法知足该业务需求。

（带表头显示隐蔽配置、表头排序、列固定、列行宽高设置，不带行排序）

也有很多大略的配置型表格样式，只须要配置列显示和隐蔽以及排序的功能，这列需求相对上面的案例大略很多，也更好设计和开拓实现。

（带表头显示隐蔽配置、表头排序、列固定，不带行排序、列行宽高设置）

3. 多层级型表格

多层级型表格：多层级可分为表头多层级和数据行多层级。

下图是表头多层级，一级表头霸占宽度是下一级表头之和，下下级再逐渐递增，实现多层级的表头设置，上面的配置型表格的案例截图也是属于多层级表头的类型，可结合一起查看。

（表头多层级）

数据多层级时，一样平常通过树构造展示数据的层级关系，表格中可支持数据的展开和收起，方便查阅数据以及清晰的看到数据的层级关系。

（数据多层级）

4. 扩展型表格

扩展型表格：支持表格行数据和列数据的自定义增减。

数据掩护需求中可支持在表格中直接添加数据，在表格中直接输入信息并保存，不须要通过弹窗或者页面的形式来增加一条数据。
通过“添加一行数据”实现新增一行数据，编辑完成后直接天生数据信息。
这样的交互对付用户的理解和利用更加大略，并且可以更加快速高效的完成数据的掩护。

（支持行数据增减）

除了大略的行数据增减之外，表格中还可以支持多层级的数据增减功能，并且可以实现不同层级之间的排序功能，对付繁芜场景的业务也能知足。

（支持行数据增减、支持层级数据增减、支持行数据排序）

表格中的列数据也可以通过自定义添加，并且可以支持多种数据类型，下图中的案例是知足列数据和行数据都可以添加的场景，并且数据可支持多种形式，不过这样的表格组件相对付比较繁芜，开拓也比较有难度，小型需求场景也比较少利用到，一样平常会作为紧张的模块设计。

5. 多表格组合型表格

多表格组合型表格：支持表格中镶嵌小表格，多个表格组合的形式。

表格镶嵌小表格，也可以理解为多层级的表格，下图中的屏幕可以理解为一级数据，展开后展示该数据下的子集数据，只是子集数据是通过表格的形式展示，由于子集的数据所展示的列数据信息与主数据的列信息不同，以是须要单独展示，通过内嵌表格的形式，可以很好的展示数据层级关系，并且数据的掩护和查阅更方便。

二、结语

表格可细分为多种类型，不同的表格类型对应的功能也具有较大的差异，在选择表格类型时，须要根据实际业务需求选择得当的表格，只要能知足实际业务需求，大略的表格可知足就不用选择繁芜的表格来实现。

表格中多种操作功能，也并不是都添加上就一定是最好的，总之根据实际需求选择最适宜的即可，能够知足用户需求的同时，还须要只管即便地减少视觉噪点。

本文由 @设计小余 原创发布于大家都是产品经理。
未经容许，禁止转载

题图来自Unsplash，基于 CC0 协议

该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。