一种基于React的动态标签页及表格模板配置的方法与流程

本发明属于计算机技术软件开发，具体涉及一种基于react的动态标签页及表格模板配置的方法。

背景技术：

1、单就标签页组件和表格组件来说，目前前端领域有很多优质的解决方案，各种ui框架中都有类似组件。而且本专利也是在这些优质解决方案的基础上，探索一种基于react的动态标签页及表格模板配置的解决方案。但是这些解决方案都是纯展示性质，只针对特定数据进行展示，并未涉及针对标签页和表格模板的动态配置。到目前为止，还没有发现基于react的动态标签页及表格模板配置的解决方案。究其原因，一方面是因为较高的数据处理技术门槛，另一方面也是因为通过大量类似重复代码也能实现最终需要呈现的效果。

2、针对现目前一个项目下多个类似标签表格页面需要写大量重复代码的问题，本专利结合ant design框架中的标签页组件和表格组件，灵活运用html、css、js、react相关基础知识，通过一系列数据处理，将标签页组件、查询条件和表格组件相关联，从而获取了一种基于react的动态标签页及表格模板配置的解决方案。和现有技术相比，该技术方案所独有的技术特征是能够一模板多用，即只配置一次模板，就能用于多个模块的表格展示。和现有技术相比，该技术方案所独有的技术特征一模板多用，即只配置一次模板，就能用于多个模块的表格展示。

技术实现思路

1、本发明提出了一种基于react的动态标签页及表格模板配置的方法，以期解决背景技术中解决一个项目下多个类似标签表格页面需要写大量重复代码的问题。

2、为了实现上述目的，本发明采用以下技术方案：

3、一种基于react的动态标签页及表格模板配置的方法，包括以下步骤：

4、定义模板数据；

5、在bom中，用标签页组件作为最外层包裹容器，在标签页组件上设置标签添加事件；

6、标签页中分别放置表格查询条件容器和表格模板容器并设置相应的查询条件添加事件和表格列添加事件；

7、将模板数据传给后端，保存至数据库；

8、取出模板数据，对标签页、查询条件和表格进行渲染。

9、在一些实施例中，所述定义模板数据；包括：定义一个状态表示模板数据，用于将标签页、查询条件、表格模板容器联系起来；该状态的数据结构为数组，数组里面的子元素的数据结构为对象，表示对应标签页数据，所述对象里面包含标签页名称、查询条件数组、表格模板数组三个必要属性。

10、在一些实施例中，所述在标签页组件上设置标签添加事件；包括：通过输入框设置新添加标签页的名称，并将该名称数据放入所述模板数据中；同时，为该模板数据设置两个空数组，用于放置查询条件数据和表格模板数据。

11、在一些实施例中，所述标签页中分别放置表格查询条件容器和表格模板容器并设置相应的查询条件添加事件和表格列添加事件。

12、在一些实施例中，通过表格添加事件，选择需要添加的表格列，并将选择的表格列数据放入所述对应标签页数据中的表格模板数据中，dom中遍历所述表格列模板数组，以展示已添加的表格列。

13、在一些实施例中，在需要展示标签页表格数据的地方通过接口取出模板数据对标签页、查询条件和表格进行渲染。

14、本发明与现有技术相比具有的有益效果是：

15、对于开发者来讲，针对一个项目中多个相似的标签页表格页面，不需要每个页面写一次重复逻辑的代码，大大减少工作量，提高工作效率。

16、对于用户来讲，能够根据自己的业务需求，灵活配置需要展示的数据，不必过于依赖开发者。

技术特征：

1.一种基于react的动态标签页及表格模板配置的方法，其特征在于，包括以下步骤：

2.根据权利要求1所述的一种基于react的动态标签页及表格模板配置的方法，其特征在于，所述定义模板数据；包括：定义一个状态表示模板数据，用于将标签页、查询条件、表格模板容器联系起来；该状态的数据结构为数组，数组里面的子元素的数据结构为对象，表示对应标签页数据，所述对象里面包含标签页名称、查询条件数组、表格模板数组三个必要属性。

3.根据权利要求1所述的一种基于react的动态标签页及表格模板配置的方法，其特征在于，所述在标签页组件上设置标签添加事件；包括：通过输入框设置新添加标签页的名称，并将该名称数据放入所述模板数据中；同时，为该模板数据设置两个空数组，用于放置查询条件数据和表格模板数据。

4.根据权利要求1所述的一种基于react的动态标签页及表格模板配置的方法，其特征在于，所述标签页中分别放置表格查询条件容器和表格模板容器并设置相应的查询条件添加事件和表格列添加事件。

5.根据权利要求1所述的一种基于react的动态标签页及表格模板配置的方法，其特征在于，通过表格添加事件，选择需要添加的表格列，并将选择的表格列数据放入所述对应标签页数据中的表格模板数据中，dom中遍历所述表格列模板数组，以展示已添加的表格列。

6.根据权利要求1所述的一种基于react的动态标签页及表格模板配置的方法，其特征在于，在需要展示标签页表格数据的地方通过接口取出模板数据对标签页、查询条件和表格进行渲染。

技术总结
本发明公开了一种基于React的动态标签页及表格模板配置的方法，包括以下步骤：包括以下步骤：定义模板数据；在BOM中，用标签页组件作为最外层包裹容器，在标签页组件上设置标签添加事件；标签页中分别放置表格查询条件容器和表格模板容器并设置相应的查询条件添加事件和表格列添加事件；将模板数据传给后端，保存至数据库；取出模板数据，对标签页、查询条件和表格进行渲染。

技术研发人员：杜玉芹
受保护的技术使用者：四川启睿克科技有限公司
技术研发日：
技术公布日：2024/2/1