怎么样才能制作表格(B端系统之表格的类型和使用场景)
Posted
篇首语：少年乘勇气，百战过乌孙。本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么样才能制作表格(B端系统之表格的类型和使用场景)相关的知识，希望对你有一定的参考价值。
怎么样才能制作表格(B端系统之表格的类型和使用场景)
表格既是一种可视化交流模式，也是一种组织整理数据的手段。所以在定义表格的类型时，需要考虑实际的业务场景，采用合适的表格呈现对应的业务数据。本文总结了关于表格的多种类型和使用场景，一起来看一下吧。
在B端多年滚爬后，也接触了多种客户需求，并且不同的客户具有不同的业务，不同的业务在实际需求上也存在较大的差异，所以一些常规的组件并不能满足所有的客户需求，需要根据实际需求设计出不同的组件，以此达到客户的实际需求。
表格既是一种可视化交流模式，又是一种组织整理数据的手段。目的是为了更好的查阅数据、统计数据、维护数据。所以在定义表格的类型时，需要考虑实际的业务场景，采用合适的表格呈现对应的业务数据，可以让用户更好的理解业务数据，高效的维护数据。
这一期主要总结关于表格的多种类型和使用场景。表格对于我们来说都不陌生，常用的excel也是表格的一种，只是excel是属于工具类表格，而在B端系统中，会根据实际的业务场景定义不同的表格类型。
一、表格类型分类
以下我对自己在实际工作中运用到的多种表格类型做了简单的归纳，如果大家还有其它的表格类型，希望在评论区可以补充。表格的类型我根据自己的理解进行了简单的归类，分为五种类型：
- 常规型表格
- 配置型表格
- 多层级型表格
- 扩展型表格
- 多表格组合型表格
1. 常规型表格
常规型表格：表格只做数据展示和维护，可支持增、删、改、查等数据维护的功能操作，表格数据可采用分页展示，分页模式分为翻页和分页加载两种形式，表格中又分为是否带有选框，带有选框的表格可支持批量操作。 如下图是ant.design中的表格组件，表格右侧带有常规的数据功能操作，底部带有分页切换的组件，也是最常见的表格类型。
表格使用场景分析：
对于简单的数据展示和维护、不需要批量操作可采用常规型表格，分页组件和加载分页都可满足常规表格的需求。
如果数据只做展示，那么选框和操作列都去掉即可。
（带操作，不带选框）
（不带操作，带选框）
如果需要支持表格中数据的排序、搜索、筛选功能，那么就需要在表头列数据位置增加对应的功能。表格中的多种操作功能都可以搭配使用，只要根据实际的业务需求增减表格的操作即可。
（带筛选和排序，不带搜索）
（带排序和搜索，不带筛选）
2. 配置型表格
配置型表格：在常规表格基础上，可满足表格的多项自定义配置，可调整表格中数据的排序，可调整表头的列数据展示或者隐藏，可设置列固定位置不跟随左右移动，可调整列宽度和行高度。
（带表头显示隐藏配置、表头排序，不带行排序、列固定、列行宽高设置）
下面分享一个我在实际项目中的完整配置型表格的设计，页面的信息量有点大，表头的显示隐藏是通过点击左上角的表头设置出现下拉框，可以对表头的字段进行显示、隐藏、排序、编辑、删除的操作。
表头的固定是通过列操作上的“固定列”实现的，点击固定列后，对应表头列上会显示图钉，带有图钉的列会显示在表格前列，左右滑动表格数据时，固定列不跟随滑动。
表格的列宽是直接拖拽分割线实现，行高则是通过顶上的行高配置实现，具体的交互这里就不讲解了，实际业务比较复杂，常规的表格无法满足该业务需求。
（带表头显示隐藏配置、表头排序、列固定、列行宽高设置，不带行排序）
也有很多简单的配置型表格样式，只需要配置列显示和隐藏以及排序的功能，这列需求相对上面的案例简单很多，也更好设计和开发实现。
（带表头显示隐藏配置、表头排序、列固定，不带行排序、列行宽高设置）
3. 多层级型表格
多层级型表格：多层级可分为表头多层级和数据行多层级。
下图是表头多层级，一级表头占据宽度是下一级表头之和，下下级再逐渐递增，实现多层级的表头设置，上面的配置型表格的案例截图也是属于多层级表头的类型，可结合一起查看。
（表头多层级）
数据多层级时，一般通过树结构展示数据的层级关系，表格中可支持数据的展开和收起，方便查阅数据以及清晰的看到数据的层级关系。
（数据多层级）
4. 扩展型表格
扩展型表格：支持表格行数据和列数据的自定义增减。
数据维护需求中可支持在表格中直接添加数据，在表格中直接输入信息并保存，不需要通过弹窗或者页面的形式来增加一条数据。通过“添加一行数据”实现新增一行数据，编辑完成后直接生成数据信息。这样的交互对于用户的理解和使用更加简单，并且可以更加快速高效的完成数据的维护。
（支持行数据增减）
除了简单的行数据增减之外，表格中还可以支持多层级的数据增减功能，并且可以实现不同层级之间的排序功能，对于复杂场景的业务也能满足。
（支持行数据增减、支持层级数据增减、支持行数据排序）
表格中的列数据也可以通过自定义添加，并且可以支持多种数据类型，下图中的案例是满足列数据和行数据都可以添加的场景，并且数据可支持多种形式，不过这样的表格组件相对于比较复杂，开发也比较有难度，小型需求场景也比较少运用到，一般会作为主要的模块设计。
5. 多表格组合型表格
多表格组合型表格：支持表格中镶嵌小表格，多个表格组合的形式。
表格镶嵌小表格，也可以理解为多层级的表格，下图中的屏幕可以理解为一级数据，展开后展示该数据下的子集数据，只是子集数据是通过表格的形式展示，因为子集的数据所展示的列数据信息与主数据的列信息不同，所以需要单独展示，通过内嵌表格的形式，可以很好的展示数据层级关系，并且数据的维护和查阅更方便。
二、结语
表格可细分为多种类型，不同的表格类型对应的功能也具有较大的差异，在选择表格类型时，需要根据实际业务需求选择合适的表格，只要能满足实际业务需求，简单的表格可满足就不用选择复杂的表格来实现。
表格中多种操作功能，也并不是都添加上就一定是最好的，总之根据实际需求选择最适宜的即可，能够满足用户需求的同时，还需要尽量地减少视觉噪点。
本文由 @设计小余 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
相关参考
本期目标：制作一个简单的出入库登记表。根据唯一字段条码，来登记入库数量，出库数量，自动计算库存数量。效果图：简单的出入库流水表目标：手工输入条码和名称，输入入库或出库数量后，自动计算本期仓库余数，自动...
横向隐藏的表格怎么才能显示(上手苹果发布的新系统，我觉得他们不仅在画饼，还致敬了友商)
又是一年六月初，我们的老朋友苹果，带着WWDC又双叒叕来了。今年总算是回归线下了，本来以为是一场酣畅淋漓的演讲。没想到前方差友Nate发来现场战报，厨子和Craig就出来主持了几句。顶着大太阳到现场的观众和咱们一样，...
微信的照片怎么传到电脑里面(图片表格如何转换成excel表格？你该知道这几种转换方法)
...跟我吐槽，上级让他把表格里面的内容汇总归类，再重新制作一份新的表格出来，以为这很轻松，结果上级却是发来了一堆图片，这就让他有点不知所措了。图片里面的表格数据又多有杂，如果是照着这些数据一个一个录入的话...
怎么制作表格(如何制作excel表格 怎么用excel做表格)
...提示：本教程为Excel入门教程，详细介绍一般excel表格的制作过程。制作表格前需要你在心里先构思下表格的大致布局和样式，以便实际操作的顺利完成。如何制作excel表格怎么用excel做表格本教程为Excel入门教程，详细介绍一般ex...
手机制作表格的软件(不方便开电脑，用手机微信在线编辑Word或Excel文件)
适用场景：出门在外需要修改文件，有时候只是简单的修改，没带电脑或者在外面不方便开电脑，只是简单的修改，开电脑确实太麻烦，今天教大家用手机在微信对Word或Excel进行简单的编辑，免去因为简单的文件修改要开电脑的...
...，但如果我们需要将每列数据都添加相同的表头，也就是制作多表头表格，该怎么操作呢？首先，我们看到如下表格，只有一个表头，先在F列输入数列，如下图所示123456：然后在表格当中，将表头复制相应个数，依然在F列当中...
新手入门excel表格制作(必学：10分钟掌握Excel表格制作)
大家应该都有过做Excel表的经历，尤其会计、统计、销售、采购、库存管理等职业更是需要对做表格这件事儿信手拈来。你对表格的驾驭程度练就到了哪一级？大家都知道对于做表格来说，最麻烦的就是搭建表头，有些人索性就...
汽车保养记录表格制作(工程检验表格不会做？全套表格模板汇总，项目步骤全面，下载即用)
工程检验表格不会做？全套表格模板汇总，项目步骤全面，下载即用！工程施工过程中，总是少不了对施工材料，施工成品半成品的检测。这些都是为了我们能够干出更好的工程的关键步骤。这时候就需要一份全面准确的各个施...
1、首先，我们启动软件，再新建一个空白文档。2、在文档的顶端这里有一横排的菜单栏；鼠标点击“插入”；在下方这里再点击“表格”。3、即弹出一个面板，这里有一个个小格子，鼠标放在格子上，格子呈黄色状态，表示，...
成品表格(人事专员的悲哀，新来销售内勤，被这样的表格边框难住了)
...做报表，销售内勤急冲冲的跑过来，问我为什么她的word表格，右侧的边框线怎么就是加不上去，我一听，顿时来了精神，想看看究竟，就跟着她去了销售部，当看了她的问题，顿时吓了一跳，一个入门级的word应用，却难倒了销...