CN112699653A - 基于React的数据表格渲染方法和数据表格组件 - Google Patents

Abstract

本申请涉及一种基于React的数据表格渲染方法和数据表格组件，该方法包括以下步骤：数据初处理步骤，组织待渲染数据使其成为规律性的表格数据；表格数据配置步骤，配置一表格的行内容和列内容，并将表格的key字段与表格数据的key字段对应配置；组件渲染步骤，调用一数据表格组件，将数据和表格配置入数据表格组件，并完成渲染。通过调用数据表格组件规范化数据，实现一种更好的交互体验、UI效果展示。

Description

基于React的数据表格渲染方法和数据表格组件

技术领域

本申请涉及计算机技术领域，特别是涉及基于React的数据表格渲染方法和数据表格组件。

背景技术

由于在开发过程中，表格是最常用到的，为了能快速进行表格的制作以及数据的绑定，进而加快表格的生成速度，经常采用渲染的方式，使代码量大大减少，表格的生成更加方便和精确。

目前业内有进行表格渲染组件依然使用的是过时的table标签来进行布局，然而table标签对移动端性能支持较差，因其子元素自适应的特性，移动端的展示会出现很多样式问题，甚至直接崩溃，使渲染效率较低且用户体验差。

本发明提出一种基于React的数据表格渲染方法和数据表格组件，能规范化数据，以提供更好的交互体验、UI效果展示。

发明内容

本申请实施例提供了一种基于React的数据表格渲染方法和数据表格组件，以至少提供更好的交互体验和UI效果展示。

第一方面，本申请实施例提供了一种基于React的数据表格渲染方法，包括以下步骤：

数据初处理步骤，组织待渲染数据使其成为规律性的表格数据；

表格数据配置步骤，配置一表格的行内容和列内容，并将所述表格的key字段与所述表格数据的key字段对应配置；

组件渲染步骤，调用一数据表格组件，将所述表格数据和所述表格配置入所述数据表格组件，并完成渲染。

在其中一些实施例中，所述组件渲染步骤具体包括以下步骤：

数据接收步骤，所述数据表格组件接收外部传入的所述待渲染数据，并将其存储在内部的state中；

数据重新组装步骤，所述数据表格组件接收部分配置参数，调用格式化数据方法，将所述表格数据依据层级和所述配置参数进行重新组装；

单元格渲染步骤，通过一header对应所述表格的表头和列数据，将一body中的每一条数据对应所述表格中的每一行数据，所述body为所述表格数据的具体数据，根据所述header中的每列的key字段，获取所述body中每行的具体数据并渲染为一个单元格；

数据渲染步骤，在render中，调用初处理后的所述表格数据，结合渲染层html，对所述表格数据进行渲染，并将渲染后的所述表格数据存入一页面容器。

在其中一些实施例中，所述配置参数用于控制所述表格的每行数据是否可选、是否仅显示副标字段、默认选中哪些行以及是否默认全选。

在其中一些实施例中，所述数据渲染步骤之后还包括调整步骤，包括以下步骤：

UI重绘步骤，对所述表格的整体UI进行一次重绘，计算各个模块的位置，设置所述数据表格组件的滚动效果和单元格的样式；

滚动查看步骤，所述表格显示在视窗内，并通过滚动对所述表格数据进行查看。

在其中一些实施例中，所述UI重绘步骤具体包括以下步骤：

数据获取步骤，首先获取表格容器的宽高数据和渲染后所述表头的高度，其次，通过所述表头的子节点宽度，计算整个所述表头的宽度；最后，计算行首缩进、行尾的缩进和每行中每个所述单元格的间距；

显示判断步骤，判断是否显示页码，并获取所述页码的高度；

横向滚动判断步骤，根据所述表格容器、所述表头和所述页码的高度，获得所述表格内可滚动区域的高度值，将所述表格容器的宽度与所有列及其间距的和进行比较，判断是否添加横向滚动。

在其中一些实施例中，当浏览器的所述视窗的尺寸发生变化时，对所述表格的所述整体UI进行重绘。

第二方面，本申请实施例提供了一种基于React的数据表格组件，应用于上述第一方面的数据表格渲染方法，包括：

数据接收模块，所述数据表格组件接收外部传入的所述待渲染数据，并将其存储在内部的state中；

数据重新组装模块，所述数据表格组件接收部分配置参数，调用格式化数据方法，将所述表格数据依据层级和所述配置参数进行重新组装；

单元格渲染模块，通过一header对应所述表格的表头和列数据，将一body中的每一条数据对应所述表格中的每一行数据，所述body为所述表格数据的具体数据，根据所述header中的每列的key字段，获取所述body中每行的具体数据并渲染为一个单元格；

数据渲染模块，在render中，调用初处理后的所述表格数据，结合渲染层html，对所述表格数据进行渲染，并将渲染后的所述表格数据存入一页面容器。

在其中一些实施例中，还包括调整模块，包括：

UI重绘单元，对所述表格的整体UI进行一次重绘，计算各个模块的位置，设置所述数据表格组件的滚动效果和单元格的样式；

滚动查看单元，所述表格显示在视窗内，并通过滚动对所述表格数据进行查看。

在其中一些实施例中，所述UI重绘单元具体包括：

数据获取子单元，首先获取表格容器的宽高数据和渲染后所述表头的高度，其次，通过所述表头的子节点宽度，计算整个所述表头的宽度；最后，计算行首缩进、行尾的缩进和每行中每个所述单元格的间距；

显示判断子单元，判断是否显示页码，并获取所述页码的高度；

横向滚动判断子单元，根据所述表格容器、所述表头和所述页码的高度，获得所述表格内可滚动区域的高度值，将所述表格容器的宽度与所有列及其间距的和进行比较，判断是否添加横向滚动。

在其中一些实施例中，所述数据表格组件控制所述表格的行数据的选中与取消，全选与全取消；

选中方式默认为每行数据的第一列为复选框CheckBox，通过调用所述数据表格组件时设置参数rowSelection:{type:”row”}选中对应所述行数据；

每次操作所述行数据后，通过调用外层传入的callback函数将选中的所述行数据返回，以供外层操作。

相比于相关技术，本申请实施例提供的一种基于React的数据表格渲染方法和数据表格组件，通过调用数据表格组件，规范化数据，有效提高了交互体验和UI效果展示。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的基于React的数据表格渲染方法的流程；

图2是根据本申请实施例的组件渲染步骤的流程图；

图3是根据本申请实施例的调整步骤的流程图；

图4是根据本申请实施例的UI重绘步骤的流程图；

图5是根据本申请优选实施例的基于React的数据表格渲染方法的流程图；

图6是根据本申请实施例的数据表格渲染方法的实际应用流程图；

图7为实际应用中的渲染结果示意图；

图8是根据本申请实施例的一种基于React的数据表格组件的结构框图。

附图说明：

数据接收模块1； 数据重新组装模块2； 数据处理模块3；

数据渲染模块4； 调整模块5； UI重绘单元51；

滚动查看单元52； 数据获取子单元511； 显示判断子单元512；

横向滚动判断子单元513，

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“连接”、“相连”、“耦接”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电气的连接，不管是直接的还是间接的。本申请所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。本申请所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不代表针对对象的特定排序。

本实施例提供了一种基于React的数据表格渲染方法。图1是根据本申请实施例的基于React的数据表格渲染方法的流程图，如图1所示，该流程包括如下步骤：

数据初处理步骤S1，组织待渲染数据使其成为规律性的表格数据；

表格数据配置步骤S2，配置一表格的行内容和列内容，并将表格的key字段与表格数据的key字段对应配置；

组件渲染步骤S3，调用一数据表格组件，将表格数据和表格配置入数据表格组件，并完成渲染。

在实际的应用中，组织后的表格数据需要对数组对象的格式组装数据，数组对象中数据的key和value没有要求。

需要说明的是，行内容配置中的key，需要取表格数据中存在的key，防止出现因为找不到数据，造成渲染的单元格为空的情况。

通过上述步骤，通过调用数据表格组件，支持规律性数据的渲染、行单选、行多选、行嵌套、翻页、单元格可支持渲染字符串等普通类型数据，也可以渲染HTML节点，表格可自适应显示器宽度等功能。有效提高了交互体验和UI效果展示。

图2是根据本申请实施例的组件渲染步骤的流程图，如图2所示，在其中一些实施例中，组件渲染步骤S3具体包括以下步骤：

数据接收步骤S31，数据表格组件接收外部传入的待渲染数据，并将其存储在内部的state中；

数据重新组装步骤S32，数据表格组件接收部分配置参数，调用格式化数据方法，将表格数据依据层级和配置参数进行重新组装；

数据处理步骤S33，通过一header对应表格的表头和列数据，将一body中的每一条数据对应表格中的每一行数据，所述body为表格数据的具体内容，根据header中的每列的key字段，处理body中每行的所述数据；

数据渲染步骤S34，在render中，调用初处理后的表格数据，结合渲染层html，对表格数据进行渲染，并将渲染后的表格数据存入一页面容器。

在实际的应用中，在挂载数据表格组件时，将外层通过props传入的数据赋值给数据表格组件内的state，避免数据表格组件内部操作表格数据时，受到外层数据影响。

上述数据表格组件支持常规的表格数据渲染，同时可支持带层级的数据展开，以及父级行数据的单元格与同列中子级数据的单元格显示不同字段的数据，如：有些行数据中包含字段名称、字段别名，这两个字段可渲染在同一列中，传统表格同一列将渲染同一个字段的数据；该组件也可实现父级数据可显示复选框，子级数据不显示复选框等。

在其中一些实施例中，配置参数用于控制表格的每行数据是否可选、是否仅显示副标字段、默认选中哪些行以及是否默认全选。

需要说明的是，配置参数还可以用于确认是否配置完成等，本发明并不以此为限。

在其中一些实施例中，数据渲染步骤S3之后还包括调整步骤S4，图3是根据本申请实施例的调整步骤的流程图，如图3所示，包括以下步骤：

UI重绘步骤S41，对表格的整体UI进行一次重绘，计算各个模块的位置，设置数据表格组件的滚动效果和单元格的样式；

滚动查看步骤S42，表格显示在视窗内，并通过滚动对表格数据进行查看。

在实际的应用后，因为在渲染表格数据之前，不确定行数及列数(即整个表格容器的宽高)，渲染后可能会造成整个表格容器超出浏览器视窗范围，出现滚动条或者错位等现象，所以，在数据表格组件渲染完成后，会在componentDidUpdate生命周期中，调用页面的UI重渲染。通过ref，计算各个模块的位置，设置数据表格组件的滚动效果、单元格的样式等。

图4是根据本申请实施例的UI重绘步骤的流程图，如图4所示，在其中一些实施例中，UI重绘步骤S41具体包括以下步骤：

数据获取步骤S411，首先获取表格容器的宽高数据和渲染后表头的高度，其次，通过表头的子节点宽度，计算整个表头的宽度；最后，计算行首缩进、行尾的缩进和每行中每个单元格的间距；

显示判断步骤S412，判断是否显示页码，并获取页码的高度；

横向滚动判断步骤S413，根据表格容器、表头和页码的高度，获得表格内可滚动区域的高度值，将表格容器的宽度与所有列及其间距的和进行比较，判断是否添加横向滚动。

在其中一些实施例中，当浏览器的视窗的尺寸发生变化时，对表格的整体UI进行重绘。

下面通过优选实施例对本申请实施例进行描述和说明。

图5是根据本申请优选实施例的基于React的数据表格渲染方法的流程图。

S401，组织需要渲染的数据，使数据成为规律性的表格数据；

S402，配置表格的行、列内容；

S403，调用表格组件，将组装好的数据与表格配置传入该组件，即可完成渲染。

数据表格组件完成渲染方式如下：

S4031，创建页面容器，用来承载渲染的表格内容。

S4032，接收外部传入的待渲染数据，并存储在内部的state中。

S4033，数据表格组件内接收到数据后，同时会接收部分配置参数，调用格式化数据的方法，将表格数据按照层级以及控制参数，将表格数据进行重新组装。

S4034，解析数据，通过header来渲染表格的表头和列数据；body为数据具体内容，将body中的每一条数据渲染为表格中的一行。根据header中每列的key字段，获取body中每行的具体数据，渲染为一个单元格。

S404，会对整体表格的UI进行一次重绘，计算各个模块的位置，设置组件的滚动效果、单元格的样式等，当浏览器窗口尺寸发生变化时，也需要调用该方法，对整体表格的UI进行一次重绘。最后，将整个表格都显示在视窗内，只对内容区域(即所有行)进行滚动。

上述对UI进行重绘的具体操作流程如下

S4041，获取表格容器的宽高和渲染后表头的高度，并通过表头的子节点宽度，计算出整个表头的宽度；计算行首、行尾的缩进，以及每行中每个单元格的间距；

S4042，判断是否显示页码，并获得页码的高度；

S4043，用表格容器的高度，减去表头、页码等高度，计算得出表格内可滚动区域的高度值，同时用表格容器的宽度与所有列及其间距的和进行比较，来判断是否需要添加横向滚动。

S4044，在render中，调用预处理好的表格数据，并结合渲染层html，对表格数据进行渲染。

图6是根据本申请实施例的数据表格渲染方法的实际应用流程图，如图6所示，该数据表格渲染方法包括如下步骤：

S601，组织表格组件需要的规律性数据，规律性数据包括：任务名称、任务类型、任务模式、标注者、运行状态、任务进度、任务量和创建时间，具体代码如下：

S602，配置表格的行、列信息，具体代码如下：

S603,调用表格组件

S604，渲染完成，渲染结果见图7所示。

需要说明的是，在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本实施例还提供了一种基于React的数据表格组件，该组件用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的组件较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图8是根据本申请实施例的一种基于React的数据表格组件的结构框图，如图8所示，该组件包括：

数据接收模块1，数据表格组件100接收外部传入的待渲染数据，并将其存储在内部的state中；

数据重新组装模块2，数据表格组件100接收部分配置参数，调用格式化数据方法，将表格数据依据层级和配置参数进行重新组装；

数据处理模块3，通过一header来渲染表格的表头和列数据，将一body中的每一条数据渲染表格中的每一行数据，body为表格数据的具体内容，根据header中的每列的key字段，处理body中每行的数据；

数据渲染模块4，在render中，调用初处理后的表格数据，结合渲染层html，对表格数据进行渲染，并将渲染后的表格数据存入一页面容器。

该数据表格组件设置为class类组件，在constructor中声明变量及ref，该数据表格组件支持常规的表格数据渲染，同时可支持带层级的数据展开，以及父级行数据的单元格与同列中子级数据的单元格显示不同字段的数据，如：有些行数据中包含字段名称、字段别名，这两个字段可渲染在同一列中，传统表格同一列将渲染同一个字段的数据；该组件也可实现父级数据可显示复选框，子级数据不显示复选框等。

在其中一些实施例中，还包括调整模块5，包括：

UI重绘单元51，对表格的整体UI进行一次重绘，计算各个模块的位置，设置数据表格组件100的滚动效果和单元格的样式；

滚动查看单元52，表格显示在视窗内，并通过滚动对表格数据进行查看。

在其中一些实施例中，UI重绘单元51具体包括：

数据获取子单元511，首先获取表格容器的宽高数据和渲染后表头的高度，其次，通过表头的子节点宽度，计算整个表头的宽度；最后，计算行首缩进、行尾的缩进和每行中每个单元格的间距；

显示判断子单元512，判断是否显示页码，并获取页码的高度；

横向滚动判断子单元513，根据表格容器、表头和页码的高度，获得表格内可滚动区域的高度值，将表格容器的宽度与所有列及其间距的和进行比较，判断是否添加横向滚动。

在其中一些实施例中，所述数据表格组件100控制所述表格的行数据的选中与取消，全选与全取消；

选中方式默认为每行数据的第一列为复选框CheckBox，通过调用所述数据表格组件时设置参数rowSelection:{type:”row”}选中对应所述行数据；

每次操作所述行数据后，通过调用外层传入的callback函数将选中的所述行数据返回，以供外层操作。

在其中一些实施例中，当浏览器的视窗的尺寸发生变化时，对表格的整体UI进行重绘。

本发明为了解决交互效果不好的问题，封装了一种数据表格组件，对规律性的数据进行处理，通过该数据表格组件渲染。该组件支持规律性数据的渲染、行单选、行多选、行嵌套、翻页、单元格可支持渲染字符串等普通类型数据，也可以渲染HTML节点，表格可自适应显示器宽度等功能。

本发明提出的数据表格组件支持同一列中以层级为界展示不同字段来源的数据，如第一行第一列展示字段A，第二行子集中，第一列可展示字段B的数据，如此，解决了表格嵌套的问题，可实现行数据的嵌套；可支持浏览器窗口尺寸变化时，组件重渲染；支持固定表头、页码，内容区域滚动。

需要说明的是，上述各个模块可以是功能模块也可以是程序模块，既可以通过软件来实现，也可以通过硬件来实现。对于通过硬件来实现的模块而言，上述各个模块可以位于同一处理器中；或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种基于React的数据表格渲染方法，其特征在于，包括以下步骤：

数据初处理步骤，组织待渲染数据使其成为规律性的表格数据；

表格数据配置步骤，配置一表格的行内容和列内容，并将所述表格的key字段与所述表格数据的key字段对应配置；

组件渲染步骤，调用一数据表格组件，将所述表格数据和所述表格配置入所述数据表格组件，并完成渲染。

2.根据权利要求1所述的基于React的数据表格渲染方法，其特征在于，所述组件渲染步骤具体包括以下步骤：

数据接收步骤，所述数据表格组件接收外部传入的所述待渲染数据，并将其存储在内部的state中；

数据重新组装步骤，所述数据表格组件接收部分配置参数，调用格式化数据方法，将所述表格数据依据层级和所述配置参数进行重新组装；

单元格渲染步骤，通过一header对应所述表格的表头和列数据，将一body中的每一条数据对应所述表格中的每一行数据，所述body为所述表格数据的具体数据，根据所述header中的每列的key字段，获取所述body中每行的具体数据并渲染为一个单元格；

数据渲染步骤，在render中，调用初处理后的所述表格数据，结合渲染层html，对所述表格数据进行渲染，并将渲染后的所述表格数据存入一页面容器。

3.根据权利要求1所述的基于React的数据表格渲染方法，其特征在于，所述配置参数用于控制所述表格的每行数据是否可选、是否仅显示副标字段、默认选中哪些行以及是否默认全选。

4.根据权利要求2所述的基于React的数据表格渲染方法，其特征在于，所述数据渲染步骤之后还包括调整步骤，包括以下步骤：

UI重绘步骤，对所述表格的整体UI进行一次重绘，计算各个模块的位置，设置所述数据表格组件的滚动效果和所述单元格的样式；

滚动查看步骤，所述表格显示在视窗内，并通过滚动对所述表格数据进行查看。

5.根据权利要求4所述的基于React的数据表格渲染方法，其特征在于，所述UI重绘步骤具体包括以下步骤：

数据获取步骤，首先获取一表格容器的宽高数据和渲染后所述表头的高度，其次，通过所述表头的子节点宽度，计算整个所述表头的宽度；最后，计算行首缩进、行尾的缩进和每行中每个所述单元格的间距；

显示判断步骤，判断是否显示页码，并获取所述页码的高度；

横向滚动判断步骤，根据所述表格容器、所述表头和所述页码的高度，获得所述表格内可滚动区域的高度值，将所述表格容器的宽度与所有列及其间距的和进行比较，判断是否添加横向滚动。

6.根据权利要求3所述的基于React的数据表格渲染方法，其特征在于，当浏览器的所述视窗的尺寸发生变化时，对所述表格的所述整体UI进行重绘。

7.一种基于React的数据表格组件，应用于上述权利要求1-6任意一项所述的数据表格渲染方法，其特征在于，包括：

数据接收模块，所述数据表格组件接收外部传入的所述待渲染数据，并将其存储在内部的state中；

数据重新组装模块，所述数据表格组件接收部分配置参数，调用格式化数据方法，将所述表格数据依据层级和所述配置参数进行重新组装；

单元格渲染模块，通过一header对应所述表格的表头和列数据，将一body中的每一条数据对应所述表格中的每一行数据，所述body为所述表格数据的具体数据，根据所述header中的每列的key字段，获取所述body中每行的具体数据并渲染为一个单元格；

数据渲染模块，在render中，调用初处理后的所述表格数据，结合渲染层html，对所述表格数据进行渲染，并将渲染后的所述表格数据存入一页面容器。

8.根据权利要求7所述的基于React的数据表格组件，其特征在于，还包括调整模块，包括：

UI重绘单元，对所述表格的整体UI进行一次重绘，计算各个模块的位置，设置所述数据表格组件的滚动效果和所述单元格的样式；

滚动查看单元，所述表格显示在视窗内，并通过滚动对所述表格数据进行查看。

9.根据权利要求8所述的基于React的数据表格组件，其特征在于，所述UI重绘单元具体包括：

数据获取子单元，首先获取一表格容器的宽高数据和渲染后所述表头的高度，其次，通过所述表头的子节点宽度，计算整个所述表头的宽度；最后，计算行首缩进、行尾的缩进和每行中每个所述单元格的间距；

显示判断子单元，判断是否显示页码，并获取所述页码的高度；

横向滚动判断子单元，根据所述表格容器、所述表头和所述页码的高度，获得所述表格内可滚动区域的高度值，将所述表格容器的宽度与所有列及其间距的和进行比较，判断是否添加横向滚动。

10.根据权利要求7-9任意一项所述的基于React的数据表格组件，其特征在于，所述数据表格组件控制所述表格的行数据的选中与取消，全选与全取消；

选中方式默认为每行数据的第一列为复选框CheckBox，通过调用所述数据表格组件时设置参数rowSelection:{type:”row”}选中对应所述行数据；

每次操作所述行数据后，通过调用外层传入的cal lback函数将选中的所述行数据返回，以供外层操作。

Images