技术领域
[0001] 本申请实施例涉及业务处理领域，具体涉及一种表格显示方法、计算机设备及计算机存储介质。
相关背景技术
[0002] 在ERP系统的使用过程中，用户经常需要查看或者编辑单据或者凭证等数据，这些数据会以表格的形式展示。用户可以拖拽表格中的纵线以调整列宽。
[0003] 在ERP系统中，用户可以向表格录入凭证数据或者单据数据等信息，当录入的信息内容较多时，可调整信息所在列的列宽以让信息完整显示，但是当页面宽度调整时，除了该信息所在列之外的其他列的列宽都会等比例调整，此时会导致该信息所在列的列宽过宽或过窄，与其他列的列宽在比例上不协调，影响表格信息查看和编辑效率，也影响表格结构的美观性和视觉呈现。另一方面，行高多数为固定行高，当录入的信息内容较多时又会导致信息无法完整显示，例如仅以省略号指代无法显示的信息，这样又会影响用户查看和编辑信息。
[0004] 因此，现有ERP系统的表格行列显示方式适应性和灵活性差，难以满足用户在不同业务场景下对表格的使用需求，影响用户使用体验。
具体实施方式
[0036] 本申请实施例提供了一种表格显示方法、计算机设备及计算机存储介质，用户可以自由选择和切换表格结构的配置模式以适应实际的表格使用场景和需求。
[0037] 请参阅图1，本申请实施例中网络框架包括：
[0038] 业务服务器100以及终端集群；终端集群可以包括：终端设备200a、终端设备200b、终端设备200c、……、终端设备200n等终端设备。
[0039] 其中，上述业务服务器100可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云数据库、云服务、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。终端设备(包括终端设备200a、终端设备200b、终端设备200c、……、终端设备200n)可以是智能手机、平板电脑、笔记本电脑、台式计算机、掌上电脑、移动互联网设备(mobile internet device，MID)、可穿戴设备(例如智能手表、智能手环等)、智能电脑、智能车载等智能终端。
[0040] 其中，业务服务器100与终端集群中的各终端设备可以建立通信连接，终端集群中的各终端设备之间也可建立通信连接。换句话说，业务服务器100可与终端设备200a、终端设备200b、终端设备200c、……、终端设备200n中的各终端设备建立通信连接，例如终端设备200a与业务服务器100之间可建立通信连接。终端设备200a与终端设备200b之间可建立通信连接，终端设备200a与终端设备200c之间也可建立通信连接。其中，上述通信连接不限定连接方式，可以通过有线通信方式进行直接或间接地连接，也可以通过无线通信方式进行直接或间接地连接等，具体可根据实际应用场景确定，本申请在此不做限制。
[0041] 应该理解，如图1所示的终端集群中的每个终端设备均可以安装有应用客户端，当该应用客户端运行于各终端设备中时，可分别与业务服务器100之间进行数据交互，使得业务服务器100可以接收来自于每个终端设备的业务数据(比如用户通过终端设备上传的财务管理数据)。其中，该应用客户端可以为财务管理应用、企业事务管理应用、浏览器应用、社交应用、即时通信应用、直播应用、游戏应用、短视频应用、视频应用、音乐应用、购物应用、小说应用、支付应用等具有显示文字、图像、音频以及视频等数据信息功能的应用客户端，具体可根据实际应用场景需求确定，在此不做限制。其中，该应用客户端可以为独立的客户端，也可以为集成在某客户端(例如财务管理客户端、企业事务管理客户端等)中的嵌入式子客户端，具体可根据实际应用场景确定，在此不做限定。
[0042] 在相关方案中，ERP系统等软件系统显示的表格中，当拖拽表格的目标列的边线以调整目标列的列宽时，目标列的列宽为拖拽后宽度，表格内其他列重新计算宽度，以适应页面宽度，使所有列都在当前页面视区内显示。放大或者缩小页面宽度时，所有列，包括已调整列宽的目标列，均等比例放大或缩小以在页面宽度内显示。如图2所示，其中某一列被调整列宽时，其他列也相应地调整列宽以适应表格宽度和页面宽度，以便在当前页面视区内显示。当调整页面宽度时，所有列均等比例调整。但是，当目标列的列宽调大时，其他列会相应地调小列宽，这对其他列的信息查看造成影响，且当屏幕较小而其他列的单元格中内容较多时难以展示，影响信息查看和编辑。
[0043] 在另一种相关方案中，当拖拽表格的目标列的边线以调整目标列的列宽时，目标列的列宽为拖拽后宽度，目标列占用左侧/右侧列宽，表格内其他列宽保持不变。放大或缩小页面宽度时，除已调整列宽的目标列固定列宽以外，其他列等比例放大或缩小以适应页面宽度。如图3所示，其中某一列被调整列宽时，右侧的列的列宽被占用，其他列的列宽不变。当调整页面宽度时，已调整列宽的目标列的列宽不变，其他列均等比例调整。但是，当页面宽度缩小或放大时，已调整列宽的目标列的列宽可能过宽或过窄，与其他列的列宽比例不协调，影响表格的美观性和视觉呈现。
[0044] 在另一种相关方案中，当拖拽表格的目标列的边线以调整目标列的列宽时，目标列的列宽为拖拽后宽度，表格内其他列的列宽保持不变。放大或缩小页面宽度时，所有列均固定列宽。如图4所示，其中某一列被调整列宽时，其他列的列宽不变。当调整页面宽度时，所有列的列宽都保持不变。但是，当页面宽度缩小时，已调整列宽的目标列的列宽可能过宽或过窄，所有列宽比例不协调，影响表格的美观性和视觉呈现。当页面宽度变宽时，页面中在表格的右侧区域会出现大片空白，所有列相对拥挤，也影响页面的美观性和视觉呈现。
[0045] 而对于行高，相关方案中ERP系统等软件系统对于表格的行高调整，要么为固定高度，要么为根据单元格中的内容调整高度。如图5所示，无论单元格中的内容多少，都显示固定的行高，但如果单元格中的内容较多时仅能以省略号指代无法显示的其他内容，影响信息查看和编辑。或者是，行高根据单元格中的内容调整，此做法便于查看和编辑信息，但是当每行文本数量不同时，行高高度不一，文本内容过高时单行甚至会占据屏幕较多区域，需滑动至第二屏查看，同时也影响表格的美观性和视觉呈现。
[0046] 因此，相关方案中表格的显示方式无法满足用户对表格的使用需求，在不同业务场景下，不同用户对表格的列宽行高使用需求不同，例如在ERP系统等软件系统的录入凭证场景当中，有些用户需要固定列宽，有些用户需要列宽随着录入的文本内容而调整，但相关方案表格的显示方式难以满足用户的不同使用场景和使用需求。
[0047] 为解决上述技术问题，特提出本申请实施例的一种表格显示方法。下面将结合图1的网络框架，对本申请实施例中的表格显示方法进行描述：
[0048] 请参阅图6，本申请实施例中表格显示方法一个实施例包括：
[0049] 601、确定目标表格的表格结构，以所述表格结构显示所述目标表格；所述表格结构用于表示所述目标表格的行高和/或列宽；
[0050] 本实施例的方法可应用于计算机设备，该计算机设备可以是图1所示网络框架中的业务服务器100或者各终端设备。计算机设备可以按照ERP系统等软件系统以便为用户提供业务解决方案，如为用户的凭证、单据、报表等业务数据的录入提供表格显示和表格制作的功能。为此，计算机设备可获取待显示的目标表格的表格结构，该表格结构用于表示目标表格的各个行的行高以及各个列的列宽，从而可基于该表格结构显示目标表格，即目标表格的各个行的行高和各个列的列宽可显示为该表格结构中相应的行高和相应的列宽。
[0051] 602、显示所述目标表格对应的配置模式，所述配置模式包括自适应模式和指定模式；
[0052] 计算机设备还显示目标表格对应的配置模式以供用户选择，该配置模式包括自适应模式和指定模式，自适应模式表示目标表格的表格结构根据表格结构调整场景进行调整，指定模式用于表示目标表格根据指定的表格结构进行显示。其中，该表格结构调整场景包括任意的需要改变表格结构的场景，如用户在单元格中录入的内容过多、或者用户调整页面尺寸等可能会触发表格结构调整的场景。
[0053] 603、当接收到对所述自适应模式的选择操作时，根据当前的表格结构调整场景对所述目标表格的表格结构进行调整并显示调整效果；
[0054] 当用户选择自适应模式时，计算机设备根据当前的表格结构调整场景对目标表格的表格结构进行自适应地调整，并显示调整效果。例如，当用户在单元格中录入的内容过多时，计算机设备可根据用户录入的内容自适应地调整行高或者列宽，以让用户录入的内容完全显示，便于用户查看和编辑信息。或者是，当用于显示目标表格的页面尺寸发生变化时，可根据页面尺寸变化自适应调整表格结构，以让表格尺寸匹配页面尺寸，避免页面尺寸变大时表格结构不作调整导致页面出现大片空白区域，或者避免页面尺寸变小时表格结构不作调整导致部分列无法显示而只能滑动至下一屏显示，从而可方便用户查看表格的各个列。
[0055] 604、当接收到对所述指定模式的选择操作时，存储所述目标表格的当前表格结构，以用于在下一次打开所述目标表格时将所述当前表格结构作为所述指定的表格结构显示所述目标表格；
[0056] 当用户选择指定模式时，计算机设备存储目标表格的当前表格结构，在下一次打开此目标表格时，可将该当前表格结构作为上述指定的表格结构显示目标表格。
[0057] 本实施例中，计算机设备确定目标表格的表格结构，以该表格结构显示目标表格，表格结构用于表示目标表格的行高和/或列宽，显示目标表格对应的配置模式，配置模式包括自适应模式和指定模式，自适应模式用于表示目标表格的表格结构根据表格结构调整场景进行调整，指定模式用于表示目标表格根据指定的表格结构进行显示。当选择自适应模式时，根据当前的表格结构调整场景对目标表格的表格结构进行调整并显示调整效果；当选择指定模式时，存储目标表格的当前表格结构，以用于在下一次打开目标表格时将当前表格结构作为指定的表格结构显示目标表格。因此，用户可根据实际的使用需求和使用场景对表格的配置模式进行选择和切换，若用户需要完整显示单元格中的内容，则切换选择自适应模式以让信息完全显示；若用户想要表格的各行各列的比例协调以增加表格美观性，则可维持表格按照当前的行高列宽显示，若切换选择指定模式则表格在下一次打开时仍然按照当前的表格结构显示，满足用户对表格的不同使用场景和使用需求，提升用户使用体验。
[0058] 下面将在前述图6所示实施例的基础上，进一步详细地描述本申请实施例。请参阅图7，本申请实施例中表格显示方法另一实施例包括：
[0059] 701、确定目标表格的表格结构，以所述表格结构显示所述目标表格；所述表格结构用于表示所述目标表格的行高和/或列宽；
[0060] 在显示目标表格时，可初始化表格以确定目标表格的列宽和行高。在初始化表格时，可基于React前端框架显示和设置表格的属性。React是一个用于构建用户界面的JAVASCRIPT库，主要用于构建UI层，允许开发者使用React和Javascript构建原生移动应用。例如，在React前端框架中，可使用ref方法访问DOM元素或组件实例，通过ref属性和React.createRef()方法来创建和使用ref，设置目标表格的表格外框的ref为gridContainerRef，使用gridContainerRef这一字段存储目标表格的表格外框的整体宽度。
[0061] 并且，可创建一种监听组件用于监听gridContainerRef大小的改变，以及创建另一种监听组件用于监听目标表格的配置模式的变化。
[0062] 在初始化表格时，若监听到目标表格的当前配置模式为自适应模式，则获取目标表格的初始表格结构，根据当前的表格结构调整场景对初始表格结构进行调整得到目标表格结构，并以该目标表格结构显示目标表格，即完成对表格的初始化。其中，该初始表格结构可以是前一次显示目标表格时所依据的列宽和行高数据，或者是预先设置的默认列宽和行高数据，此处不作限定。因此，初始表格结构包括初始列宽和初始行高。
[0063] 若监听到目标表格的配置模式为指定模式，则获取预设的表格结构，并将预设的表格结构作为指定的表格结构显示目标表格。该预设的表格结构可以是数据库中预先存储的列宽和行高数据，或者是预先指定的列宽和行高数据。
[0064] 其中，若目标表格当前的配置模式为自适应模式，则在根据当前的表格结构调整场景对初始表格结构进行调整以得到目标表格结构时，若当前的表格结构调整场景包括用于显示目标表格的页面尺寸，则可根据页面尺寸确定目标表格的整体宽度，以及根据初始表格结构中的初始列宽确定目标表格的初始列宽总和，根据该整体宽度与初始列宽总和调整初始列宽得到目标列宽。
[0065] 其中，在根据该整体宽度与初始列宽总和调整初始列宽得到目标列宽时，一种计算方式可以是，计算该整体宽度与初始列宽总和之间的比值，计算该比值与初始列宽的乘积即可得到目标列宽。另一种计算方式可以是，对于目标表格的每一列，计算该列的初始列宽在初始列宽总和中的占比，并计算该整体宽度与该占比的乘积即可得到该列的目标列宽。
[0066] 在根据页面尺寸确定目标表格的整体宽度时，可预设页面尺寸与表格整体宽度的对应关系，如预设表格整体宽度在页面宽度中的占比，则可基于上述对应关系确定页面宽度对应的表格整体宽度，如根据上述占比和当前的页面宽度确定表格整体宽度。
[0067] 限定列宽可调整的列命名为自适应列，以及限定指定列宽的列命名为固定列。在根据当前的表格结构调整场景对目标表格的表格结构进行调整并显示调整效果时，可根据用于显示目标表格的页面尺寸确定目标表格的整体宽度，累加目标表格的表格结构中固定列的列宽得到固定列列宽总和，以及，累加目标表格的表格结构中自适应列的列宽得到自适应列列宽总和。进一步地，计算目标表格的整体宽度与固定列列宽总和之间的差值，并根据该差值与自适应列列宽总和调整目标表格的表格结构中自适应列的列宽并显示调整效果。
[0068] 其中，根据当前的表格结构调整场景对目标表格的表格结构进行调整，这一调整操作可发生在显示目标表格时对表格进行初始化的过程，即在打开和显示目标表格时根据表格结构调整场景对目标表格的表格结构进行调整；也可发生在目标表格显示之后，用户切换选择了自适应模式时根据表格结构调整场景对其表格结构进行调整，此处不作限定。
[0069] 例如，在显示目标表格时对表格进行初始化的过程，一种优选的实施方式中，目标表格的列可以都是自适应列，此时，上述的初始列宽总和即等于自适应列列宽总和。在另一种优选的实施方式中，目标表格的列也可以同时包含自适应列和固定列，此时可根据当前的表格结构调整场景对自适应列的列宽进行调整，例如根据页面尺寸调整自适应列的列宽，即累加初始表格结构中固定列的列宽得到固定列列宽总和，以及，累加初始表格结构中自适应列的列宽得到自适应列列宽总和，计算目标表格的整体宽度与固定列列宽总和之间的差值，并计算该差值与该自适应列列宽总和之间的比值，根据该比值调整自适应列的列宽。
[0070] 例如，在React前端框架中，可循环目标表格的列columns及列columns的子列，确定每列的初始列宽为colWidth，若列可显示，则累加固定列的列宽得到固定列列宽总和fixedWidthTotal，累加可自适应列的列宽得到自适应列列宽总和adaptiveWidthTotal。进一步地，获取表格外框gridContainerRef的整体宽度gridContainerWidth，计算表格外框的整体宽度中可用于列宽自适应调整的列的列宽总和，即计算目标表格的整体宽度gridContainerWidth与固定列列宽总和fixedWidthTotal之间的差值，则表格外框的整体宽度中可用于列宽自适应调整的列的列宽总和containerLeftWidth＝gridContainerWidth－fixedWidthTotal。
[0071] 并且，进一步计算containerLeftWidth与上述得到的自适应列列宽总和adaptiveWidthTotal之间的比值，可计算自适应列的列宽可放大/缩小的比例cofficient＝containerLeftWidth/adaptiveWidthTotal。在得到该比例之后，可遍历每一个自适应列，根据该比例调整每个自适应列的列宽，即自适应列调整后的列宽colWidth'＝初始列宽colWidth*cofficient。
[0072] 当然，对于每一个自适应列，也可以先计算该自适应列的初始列宽colWidth在自适应列列宽总和adaptiveWidthTotal中的占比，并计算containerLeftWidth与该占比的乘积，同样可得到自适应列调整后的列宽colWidth'。
[0073] 在完成列宽调整之后，可将目标表格当前每一列的列宽缓存在浏览器内存的voucherColsWidthCache字段中。
[0074] 至此，便完成了对目标表格中自适应列的列宽的初始化过程，使得目标表格在显示时其自适应列可基于页面尺寸而自适应地调整，让表格尺寸匹配页面尺寸，避免页面尺寸过大时表格结构不作调整导致页面出现大片空白区域，或者避免页面尺寸过小时表格结构不作调整导致部分列无法显示而只能滑动至下一屏显示，从而可方便用户查看表格的各个列。同时，也让表格的行列尺寸在比例上更加协调，避免列与列之间列宽差距过大以及行与行之间行高差距过大，从而可增强表格结构的协调性和美观性，增强表格的视觉呈现。
[0075] 若当前的表格结构调整场景包括目标表格的单元格中的内容，则当单元格中的内容的显示高度大于初始表格结构中的初始行高时，将该显示高度作为该单元格所在行的目标行高；若该单元格中的内容的显示高度小于或等于该初始行高，则将该初始行高作为单元格所在行的目标行高。
[0076] 例如，可从服务端获取行高的配置模式，例如行高的配置模式可以是固定两行模式，即设置行最大高度为48px；可以是固定6行模式，即设置行最大高度为106px。自适应模式下设置行高度为auto，利用AgGrid插件的最大行高设置，可实现行高的初始化展示。其中，AgGrid是一个Web前端网格，是基于JavaScript编程语言的数据表格，AgGrid支持类似Excel表格呈现数据的常规功能外，还包括分组计算、同步编辑、动态更新、迷你图、集成图表、独立图表等功能。
[0077] 在单元格录入数据时，当单元格中的内容的显示高度小于或等于初始行高，如小于或等于前述预设的固定两行高度，则以该固定两行高度作为该单元格所在行的目标行高；当单元格中的内容的显示高度大于初始行高，如大于前述预设的固定两行高度，则将该单元格中的内容的显示高度作为该单元格所在行的目标行高，例如单元格中的内容的显示高度为3行，则该单元格所在行的行高为3行高度；单元格中的内容的显示高度为5行，则该单元格所在行的行高为5行高度，以此类推。可执行AgGrid对应的API，如执行resetRowHeights方法，重置当前行的行高，以提升表格的渲染效率。
[0078] 因此，在目标表格初始化时根据单元格的内容对单元格所在行的行高进行自适应地调整，使得目标表格可以完整显示单元格中的内容，方便用户查看和编辑信息。
[0079] 702、显示所述目标表格对应的配置模式，所述配置模式包括自适应模式和指定模式；
[0080] 本实施例中，可显示多种配置模式供用户选择。如图8所示，列宽对应的自适应模式显示为“自适应列宽”，其指定模式显示为“记住列宽”；行高对应的自适应模式显示为“自适应行高”，其指定模式显示为“单行高度固定显示2行”以及“单行高度最大显示6行”等多种模式。用户可勾选任意一项模式以设定列宽的配置模式和行高的配置模式。
[0081] 其中，如图9所示，“单行高度固定显示2行”模式，是指行高默认按照2行文本的高度显示，即无论单元格中的内容高度为多少行，该单元格所在行的行高均为2行文本的高度，这种配置模式可以确保表格的行高协调一致，可提升表格统一性。
[0082] 如图10所示，“单行高度最大显示6行”模式，是指行高默认按照2行文本的高度显示，且最高可显示6行文本高度，即单元格中的内容行数小于或等于2行，该单元格所在行的行高为2行文本的高度；单元格中的内容行数大于2行且小于6行，该单元格所在行的行高为该单元格中的内容的显示高度；单元格中的内容行数大于或等于6行，该单元格所在行的行高为6行文本的高度。
[0083] 如图11所示，“自适应行高”模式，是指单元格所在行的行高自适应文本高度，当单元格中的内容的显示高度小于或等于2行文本的高度时，以该2行文本高度作为该单元格所在行的目标行高；当单元格中的内容的显示高度大于2行文本的高度时，则将该单元格中的内容的显示高度作为该单元格所在行的行高，例如单元格中的内容的显示高度为3行，则该单元格所在行的行高为3行高度；单元格中的内容的显示高度为8行，则该单元格所在行的行高为5行高度，以此类推。这种配置模式可以确保文本信息显示完整，方便用户查看和编辑信息。
[0084] 因此，通过提供多种配置方式的选项，用户可以根据实际使用场景和需求切换选择合适的配置方式，如用户希望表格行列尺寸比例协调，则切换至指定模式以让表格的行高和列宽协调统一；若用户希望文本信息显示完整，则可切换自适应模式以让各单元格的信息显示完整，方便信息查看和编辑。因此，可提升用户对ERP系统的表格展示和编辑功能的使用体验，为用户基于表格制作单据、凭证等业务数据提供有效可靠的帮助。
[0085] 本实施例中，用户可对目标表格中的目标列调整其列宽，即计算机设备接收到用户对目标表格中目标列的列宽调整操作时，以该列宽调整操作指示的列宽显示目标列，并将用于存储该目标列的列宽的字段的字段值更新为列宽调整操作指示的列宽，以用于在下一次打开目标表格时根据该字段的字段值显示目标列。其中，该列宽调整操作可以是任意形式的，例如用户拖拽目标列的边线以改变列宽，或者直接输入列宽的数值以改变目标列的列宽，或者提供多个列宽选项供用户切换列宽，等等。在下一次打开目标表格时根据该字段的字段值显示目标列，可以是直接按照该字段的字段值所对应的列宽显示该目标列，也可以是对该字段的字段值进行调整之后再按照调整后的字段值所对应的列宽显示该目标列。
[0086] 在调整目标列的列宽之后，为保证目标列的单元格中的内容匹配于单元格的尺寸，可进一步调整目标列中各单元格所在行的行高，即对于目标列中的每个单元格，根据当前的行高配置模式和单元格中的内容调整该单元格所在行的行高。例如当前的行高配置模式为自适应模式，则单元格所在行的行高按照该单元格中的内容的行数进行调整；若当前的行高配置模式为指定模式，则单元格所在行的行高按照指定的行高显示。
[0087] 例如，在React前端框架中，若当前配置模式为自适应模式，当调整目标列的列宽时，可更新存储自适应列列宽的字段voucherColsWidthCache中该目标列的列宽为列宽调整后的宽度。
[0088] 若当前配置模式为指定模式，则将用于存储固定列列宽的字段columnWidthSetting中该目标列的列宽更新为列宽调整后的宽度。因此，在下一次打开目标表格时，可获取columnWidthSetting字段存储的列宽数据，并根据打开目标表格时的配置模式以及columnWidthSetting字段及其字段值显示目标表格和该目标列。同时，为适应单元格中的内容高度，可进一步执行表格插件AgGrid的resetRowHeights方法重置目标列中各单元格所在行的行高，其行高可根据行高的配置模式以及单元格内容实时更新，使得表格的结构适配于文本内容的尺寸，增强表格美观性和协调性。
[0089] 703、当接收到对所述自适应模式的选择操作时，根据当前的表格结构调整场景对所述目标表格的表格结构进行调整并显示调整效果；
[0090] 本实施例中，当前的表格结构调整场景包括用于显示目标表格的页面尺寸发生变化。当监听到页面尺寸发生变化时，若目标表格当前的配置模式为指定模式，则维持目标表格在页面尺寸发生变化之前的列宽，即列宽不变。
[0091] 若目标表格当前的配置模式为自适应模式，且监听到页面尺寸发生变化，则在根据当前的表格结构调整场景对目标表格的表格结构进行调整时，可根据目标表格在页面尺寸发生变化之前的整体宽度与其在页面尺寸发生变化之后的整体宽度，调整目标表格的列宽并显示调整效果。
[0092] 其中，根据目标表格在页面尺寸变化前后的整体宽度调整目标表格的列宽，一种计算方式可以是，计算目标表格在页面尺寸变化之后的整体宽度与其在页面尺寸变化之前的整体宽度之间的比值，并分别计算该比值与所述目标表格各个列的列宽的乘积，即可得到目标表格各个列调整后的列宽。另一种计算方式可以是，对于所述目标表格的每一列，计算页面尺寸变化之前该列的列宽在目标表格的整体宽度中的占比，并计算目标表格在页面尺寸变化之后的整体宽度与该占比的乘积，即可得到该列调整后的列宽。
[0093] 在一种优选的实施方式中，目标表格的列可以都是自适应列，此时可直接根据目标表格在页面尺寸变化前后的整体宽度计算该第一比值。
[0094] 在另一种优选的实施方式中，目标表格的列也可以同时包含自适应列和固定列，此时在计算该第一比值时，可累加目标表格中固定列的列宽得到固定列列宽总和，计算目标表格在页面尺寸变化之前的整体宽度与该固定列列宽总和之间的第一差值，计算目标表格在页面尺寸变化之后的整体宽度与该固定列列宽总和之间的第二差值，并根据第一差值与第二差值调整目标表格中自适应列的列宽。
[0095] 例如，在React前端框架中，可基于监听组件监听页面尺寸变化事件。在监听到页面尺寸变化事件时，可获取页面尺寸变化前的表格外框gridContainerRef的整体宽度lastGridContainerWidth，然后在监听事件的回调中获取当前表格外框gridContainerRef的整体宽度curContainerWidth。使用getAdaptiveTotal方法计算上述的第一差值和第二差值，即计算表格外框的整体宽度与voucherColsWidthCache字段存储的固定列列宽总和之间的差值，得到第一差值lastAdaptiveTotal和第二差值curAdaptiveTotal。其中第一差值表示页面尺寸变化之前自适应列列宽总和在表格外框的整体宽度中所占用的宽度，第二差值表示页面尺寸变化之后自适应列列宽总和在表格外框的整体宽度中所占用的宽度。
[0096] 进而可计算该第一差值与该第二差值的比例，此比例表示每个自适应列需要调整的比例，即比例cofficient＝curAdaptiveTotal/lastAdaptiveTotal。使用此比例调整每个自适应列，即自适应列调整后的列宽colWidth'＝调整前的列宽colWidth*cofficient。
[0097] 当然，对于每一个自适应列，也可以先计算调整前的列宽colWidth在第一差值lastAdaptiveTotal中的占比，并计算第二差值curAdaptiveTotal与该占比的乘积，同样可得到自适应列调整后的列宽colWidth'。
[0098] 例如，如图12所示，当调整页面尺寸时，各个列的列宽按照上述调整方式进行等比例调整，使得表格在任意页面大小尺寸下都能还原得到与页面尺寸适配的行列比例，实现表格根据页面尺寸变化进行无感缩放，增强表格的视觉呈现。
[0099] 因此，用户可选择目标表格的行列尺寸随着页面的尺寸变化而自适应地调整，让表格尺寸匹配页面尺寸，避免页面尺寸变大时表格结构不作调整导致页面出现大片空白区域，或者避免页面尺寸变小时表格结构不作调整导致部分列无法显示而只能滑动至下一屏显示，从而可方便用户查看表格的各个列。同时，也让表格的行列尺寸在比例上更加协调，避免列与列之间列宽差距过大以及行与行之间行高差距过大，从而可增强表格结构的协调性和美观性，增强表格的视觉呈现。
[0100] 704、当接收到对所述指定模式的选择操作时，存储所述目标表格的当前表格结构，以用于在下一次打开所述目标表格时将所述当前表格结构作为所述指定的表格结构显示所述目标表格；
[0101] 例如，如图13所示，用户可由自适应模式切换至指定模式，如切换至“记住列宽”模式和“单行高度固定显示2行”模式，则计算机设备存储目标表格当前的列宽和行高，并在下一次重新打开目标表格时按照预先存储的列宽和行高显示目标表格。
[0102] 本实施例中，提供多种列宽配置模式和多种行高配置模式供用户随时切换，满足多种ERP行业用户录入/查看表格的场景，可提升文本查看/编辑效率，并且表格显示更自然更美观。基于此，可以实现表格针对不同页面配置不同的显示方式，满足不同功能场景下用户对表格使用的需求。
[0103] 上面对本申请实施例中的表格显示方法进行了描述，下面对本申请实施例中的计算机设备进行描述，请参阅图14，本申请实施例中计算机设备一个实施例包括：
[0104] 第一显示单元，用于确定目标表格的表格结构，以所述表格结构显示所述目标表格；所述表格结构用于表示所述目标表格的行高和/或列宽；
[0105] 第二显示单元，用于显示所述目标表格对应的配置模式，所述配置模式包括自适应模式和指定模式，所述自适应模式用于表示所述目标表格的表格结构根据表格结构调整场景进行调整，所述指定模式用于表示所述目标表格根据指定的表格结构进行显示；
[0106] 第三显示单元，用于当接收到对所述自适应模式的选择操作时，根据当前的表格结构调整场景对所述目标表格的表格结构进行调整并显示调整效果；
[0107] 存储单元，用于当接收到对所述指定模式的选择操作时，存储所述目标表格的当前表格结构，以用于在下一次打开所述目标表格时将所述当前表格结构作为所述指定的表格结构显示所述目标表格。
[0108] 本实施例一种优选的实施方式中，所述当前的表格结构调整场景包括用于显示所述目标表格的页面尺寸发生变化；
[0109] 当监听到所述页面尺寸发生变化时，若所述目标表格当前的配置模式为所述指定模式，则维持所述目标表格在所述页面尺寸发生变化之前的列宽；
[0110] 若所述目标表格当前的配置模式为所述自适应模式，且监听到所述页面尺寸发生变化，则所述第三显示单元具体用于：
[0111] 根据所述目标表格在所述页面尺寸发生变化之前的整体宽度与其在所述页面尺寸发生变化之后的整体宽度，调整所述目标表格的列宽并显示调整效果。
[0112] 本实施例一种优选的实施方式中，所述目标表格包括指定列宽的固定列以及列宽可调整的自适应列；
[0113] 所述第三显示单元具体用于：
[0114] 累加所述目标表格中所述固定列的列宽得到固定列列宽总和；
[0115] 计算所述目标表格在所述页面尺寸发生变化之前的整体宽度与所述固定列列宽总和之间的第一差值；
[0116] 计算所述目标表格在所述页面尺寸发生变化之后的整体宽度与所述固定列列宽总和之间的第二差值；
[0117] 根据所述第一差值与所述第二差值调整所述目标表格中所述自适应列的列宽。
[0118] 本实施例一种优选的实施方式中，所述第一显示单元具体用于：
[0119] 若所述目标表格的配置模式为所述自适应模式，则获取所述目标表格的初始表格结构，根据当前的表格结构调整场景对所述初始表格结构进行调整得到目标表格结构，并以所述目标表格结构显示所述目标表格；
[0120] 若所述目标表格的配置模式为所述指定模式，则获取预设的表格结构，并将所述预设的表格结构作为所述指定的表格结构显示所述目标表格。
[0121] 本实施例一种优选的实施方式中，所述当前的表格结构调整场景包括用于显示所述目标表格的页面尺寸，和/或，所述目标表格的单元格中的内容；
[0122] 所述第一显示单元具体用于：
[0123] 根据所述页面尺寸确定所述目标表格的整体宽度，以及根据所述初始表格结构中的初始列宽确定所述目标表格的初始列宽总和，根据所述整体宽度与所述初始列宽总和调整所述初始列宽得到目标列宽；
[0124] 若所述单元格中的内容的显示高度大于所述初始表格结构中的初始行高，则将所述显示高度作为所述单元格所在行的目标行高；若所述单元格中的内容的显示高度小于或等于所述初始行高，则将所述初始行高作为所述单元格所在行的目标行高；
[0125] 以所述目标列宽和所述目标行高显示所述目标表格。
[0126] 本实施例一种优选的实施方式中，所述目标表格包括指定列宽的固定列以及列宽可调整的自适应列；
[0127] 所述第三显示单元具体用于：
[0128] 根据用于显示所述目标表格的页面尺寸确定所述目标表格的整体宽度；
[0129] 累加所述目标表格的表格结构中所述固定列的列宽得到固定列列宽总和，以及，累加所述目标表格的表格结构中所述自适应列的列宽得到自适应列列宽总和；
[0130] 计算所述整体宽度与所述固定列列宽总和之间的差值，并根据所述差值与所述自适应列列宽总和调整所述目标表格的表格结构中所述自适应列的列宽并显示调整效果。
[0131] 本实施例一种优选的实施方式中，所述目标表格的配置模式包括行高配置模式，所述行高配置模式包括所述自适应模式和所述指定模式；
[0132] 第三显示单元还用于：
[0133] 以所述列宽调整操作指示的列宽显示所述目标列，并将用于存储所述目标列的列宽的字段的字段值更新为所述列宽调整操作指示的列宽，以用于在下一次打开所述目标表格时根据该字段的字段值显示所述目标列；以及，
[0134] 对于所述目标列中的单元格，根据当前的所述行高配置模式和所述单元格中的内容调整所述单元格所在行的行高。
[0135] 本实施例中，计算机设备中各单元所执行的操作与前述图6至图7所示实施例中描述的类似，此处不再赘述。
[0136] 本实施例中，计算机设备确定目标表格的表格结构，以该表格结构显示目标表格，表格结构用于表示目标表格的行高和/或列宽，显示目标表格对应的配置模式，配置模式包括自适应模式和指定模式，自适应模式用于表示目标表格的表格结构根据表格结构调整场景进行调整，指定模式用于表示目标表格根据指定的表格结构进行显示。当选择自适应模式时，根据当前的表格结构调整场景对目标表格的表格结构进行调整并显示调整效果；当选择指定模式时，存储目标表格的当前表格结构，以用于在下一次打开目标表格时将当前表格结构作为指定的表格结构显示目标表格。因此，用户可根据实际的使用需求和使用场景对表格的配置模式进行选择和切换，若用户需要完整显示单元格中的内容，则切换选择自适应模式以让信息完全显示；若用户想要表格的各行各列的比例协调以增加表格美观性，则可维持表格按照默认的行高列宽显示，并且切换选择指定模式以便表格在下一次打开时仍然按照当前的表格结构显示，满足用户对表格的不同使用场景和使用需求，提升用户使用体验。
[0137] 下面对本申请实施例中的计算机设备进行描述，请参阅图15，本申请实施例中计算机设备一个实施例包括：
[0138] 该计算机设备1500可以包括一个或一个以上中央处理器(central processing units，CPU)1501和存储器1505，该存储器1505中存储有一个或一个以上的应用程序或数据。
[0139] 其中，存储器1505可以是易失性存储或持久存储。存储在存储器1505的程序可以包括一个或一个以上模块，每个模块可以包括对计算机设备中的一系列指令操作。更进一步地，中央处理器1501可以设置为与存储器1505通信，在计算机设备1500上执行存储器1505中的一系列指令操作。
[0140] 计算机设备1500还可以包括一个或一个以上电源1502，一个或一个以上有线或无线网络接口1503，一个或一个以上输入输出接口1504，和/或，一个或一个以上操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM等。
[0141] 该中央处理器1501可以执行前述图6至图7所示实施例中计算机设备所执行的操作，具体此处不再赘述。
[0142] 本申请实施例还提供了一种计算机存储介质，其中一个实施例包括：该计算机存储介质中存储有指令，该指令在计算机上执行时，使得该计算机执行前述图6至图7所示实施例中计算机设备所执行的操作。
[0143] 本申请实施例还提供了一种计算机程序产品，其中一个实施例包括：该计算机程序产品在计算机设备上运行时，使得该计算机设备执行前述图6至图7所示实施例中计算机设备所执行的操作。
[0144] 所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
[0145] 在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
[0146] 所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
[0147] 另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
[0148] 所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，read‑only memory)、随机存取存储器(RAM，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
