动态多级表头列数据处理方法、装置、设备、介质及产品与流程
本技术涉及数据处理，尤其涉及一种动态多级表头列数据处理方法、装置、设备、介质及产品。
背景技术：
：：1、随着互联网金融的技术发展，数据量也在快速增长，很多数据需要展示出来供用户进行多方面的数据比对，因此都采用表格的形式生成展示信息。2、现有技术中，在前端开发过程中，经常需要展示数据表格，常使用基于vue3的开源组件库elementplus中的表格组件el-table，生成多级表头。但发明人发现，基础的el-table虽然能支持多级表头，但书写配置麻烦，且不支持动态多级表头，功能也少，随着数据增多，表格列元素过多，与数据相关的操作也随之变得繁琐，影响开发者和用户的工作效率。3、因此，亟需一种动态多级表头列数据处理方法，以解决上述技术问题。技术实现思路1、本技术提供一种动态多级表头列数据处理方法、装置、设备、介质及产品，用以解决现有技术中的操作繁琐和效率低的问题，使动态多级表头的配置操作更简单快捷，提高工作效率。2、第一方面，本技术提供一种动态多级表头列数据处理方法，包括：3、响应于封装操作基于开源组件库中的开源表格组件，构建表头配置组件，其中所述表头配置组件，用于：通过开源用户界面构建框架的组件属性定义函数，定义一个组件传值参数，接收初始数组属性，以配置表格的各个列属性，设置数据属性，以接收表格数据；4、基于所述表头配置组件，构建动态多级表头；5、基于所述表头配置组件，为所述动态多级表头创建表头列关系；6、基于所述表头配置组件，为所述动态多级表头创建列设置组件；7、引入所述开源组件库中的复选框组和复选框组件，并引入拖拽组件；8、基于所述表头配置组件、所述复选框组和复选框组件，为所述动态多级表头配置表格列勾选功能；9、基于所述表头配置组件和所述拖拽组件，为所述动态多级表头配置表格列拖拽功能。10、在一种可能的设计中，所述表头配置组件中包含开源表格数组组件；相应地，所述基于所述表头配置组件，构建动态多级表头，包括：基于所述表头配置组件接收初始数组属性，所述初始数组属性中的每个元素为对象，所述对象中的字段与所述开源表格数组组件接收的参数保持一致；若检测到一个元素中添加有子节点字段且所述子节点字段的字段值不为空并存放于嵌套表头数据中，则所述元素对应的表头为多级表头；若检测到一个元素中的子节点字段为空或无子节点字段，则所述元素对应的表头为普通表头；将所述多级表头和所述普通表头融合为动态多级表头。11、在一种可能的设计中，所述基于所述表头配置组件，为所述动态多级表头创建表头列关系，包括：基于所述表头配置组件，定义一个数组元数据数组，其中所述数组元数据数组的初始值为经过深拷贝后的初始数组；基于所述表头配置组件定义一个键值处理函数，以接收数组元数据数组；对所述数组元数据数组进行格式处理，为所述动态多级表头创建表头列关系。12、在一种可能的设计中，所述对所述数组元数据数组进行格式处理，为所述动态多级表头创建表头列关系，包括：若检测到所述数组元数据数组中的一个元素无身份标识主键，则为所述元素添加身边标识id属性为主键；若检测到所述数组元数据数组中的一个元素有子节点字段并且所述子节点字段的长度不为空，则将所述元素对应的列定为多级表头，并为所述多级表头添加有子节点属性，以及为所述多级表头赋值为t；若检测到所述数组元数据数组中的一个元素无子节点字段或有所述子节点字段但所述子节点字段的长度为空，则将所述元素对应的列定为普通表头；为所述数组元数据数组中每个元素对应的列添加父节点标识属性，所述父节点标识属性的取值为所述元素的上一级元素的标识，若所述元素无上一级元素，则所述父节点标识的属性赋值为根节点；为所述数组元数据数组中每个元素对应的列添加元素所处层级属性；定义一个还原数组，并将所述深拷贝后的数组元数据为所述还原数组赋值。13、在一种可能的设计中，所述基于所述表头配置组件，为所述动态多级表头创建列设置组件，包括：基于所述表头配置组件，定义一个列设置弹窗组件，并通过所述开源用户界面构建框架的组件属性定义函数，定义一个组件传值参数；接收一个数组设置数据属性，其中所述数组设置数据属性的接收值为所述还原数组；定义树状转阵列函数，并接收数组设置数据数组；提取所述数组设置数据数组中的最后一级的生成目标数组，并将所述目标数组作为待进行列设置的表头数据，以完成创建列设置组件。14、在一种可能的设计中，所述基于所述表头配置组件、所述复选框组和复选框组件，为所述动态多级表头配置表格列勾选功能，包括：将所述复选框组和复选框组件引入所述表头配置组件中；基于所述表头配置组件，定义一个勾选项数组，其中所述勾选项数组用于存放响应于用户点击勾选框操作而得到的列字段，所述用户点击勾选框操作后，动态多级列表头通过自定义事件触发函数向所述表头配置组件抛出一个数组设置事件，以传递参数为勾选项数组；基于所述表头配置组件，定义一个同名数组设置函数，其中所述同名数组设置函数用于响应数组设置事件，当所述数组设置函数接收到所述勾选项数组后，将所述勾选项数组与所述勾选项数组进行对比操作，过滤掉所述还原数组中不存在于勾选项数组中的列字段，得到过滤后的列字段赋值给所述数组元数据数组。15、在一种可能的设计中，所述基于所述表头配置组件和所述拖拽组件，为所述动态多级表头配置表格列拖拽功能，包括：将所述拖拽组件封装到所述表头配置组件中，并基于所述表头配置组件定义一个同名数组拖拽函数，以响应设置弹窗的数组拖拽事件；其中所述拖拽组件用于响应于用户拖拽操作后实现拖拽功能，并通过所述自定义事件触发函数向所述表头配置组件抛出一个数组拖拽事件，传递参数为次级数组，其中所述次级数组为所述数组设置数据数组经树状转阵列函数处理后得到的；所述同名数组拖拽函数用于接收所述次级数组；基于所述表头配置组件，定义临时数值数组，并循环遍历所述次级数组，将相邻且上级父节点标识相同的元素分为一组并赋值临时数值数组；基于所述表头配置组件，定义匹配树结构数据函数，以接收所述数值数组和还原数组；当检测到所述次级数组被遍历完之后，生成一个新的临时数组；基于所述表头配置组件，定义用于接收所述新的临时数组的以标识合并数组函数，其中所述以标识合并数组函数还用于：遍历所述新的临时数组，并根据标识属性合并相邻元素，得到目标数组；将所述目标数组赋值给所述数组元数据。16、在一种可能的设计中，所述基于所述表头配置组件、所述复选框组和复选框组件，为所述动态多级表头配置表格列勾选功能的步骤和所述基于所述表头配置组件和所述拖拽组件，为所述动态多级表头配置表格列拖拽功能的步骤同时进行。17、在一种可能的设计中，还包括：利用所述表头配置组件，通过设置根元素绑定指令，保留开源表格组件的自身属性和方法设置。18、第二方面，本技术实施例提供一种动态多级表头列数据处理装置，包括：19、父组件构建模块，用于响应于封装操作基于开源组件库中的开源表格组件，构建表头配置组件，其中所述表头配置组件，用于：通过开源用户界面构建框架的组件属性定义函数，定义一个组件传值参数，接收初始数组属性，以配置表格的各个列属性，设置数据属性，以接收表格数据；20、多级表头生成模块，用于基于所述表头配置组件，构建动态多级表头；21、表头列关系创建模块，用于基于所述表头配置组件，为所述动态多级表头创建表头列关系；22、表头列设置模块，用于基于所述表头配置组件，为所述动态多级表头创建列设置组件；23、所述表头列设置模块，还用于引入所述开源组件库中的复选框组和复选框组件，并引入拖拽组件；24、所述表头列设置模块，还用于基于所述表头配置组件、所述复选框组和复选框组件，为所述动态多级表头配置表格列勾选功能；25、所述表头列设置模块，还用于基于所述表头配置组件和所述拖拽组件，为所述动态多级表头配置表格列拖拽功能。26、第三方面，本技术实施例提供一种电子设备，包括：处理器，以及与所述处理器通信连接的存储器；27、所述存储器存储计算机执行指令；28、所述处理器执行所述存储器存储的计算机执行指令，以实现如第一方面描述的方法。29、第四方面，本技术实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如第一方面描述的方法。30、第五方面，本技术提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现如第一方面描述的方法。31、本技术提供的动态多级表头列数据处理方法、装置、设备、介质及产品，其中，该方法通过基于开源组件库中的开源表格组件，构建表头配置组件，再基于表头配置组件，构建动态多级表头，然后为动态多级表头创建表头列关系和列设置组件，最后配置表格列勾选功能和表格列拖拽功能。表格列勾选功能使得用户可以自定义隐藏不重要的字段，便于用户快速定位到目标数据，表格列拖拽使得用户可自行按照优先级更改列的顺序，便于关注重点字段，使与表格相关的操作更便捷，提高了用户工作效率，提升了用户体验。当前第1页12当前第1页12
技术特征：
技术总结
本申请提供一种动态多级表头列数据处理方法、装置、设备、介质及产品。涉及数据处理技术领域。该方法包括：构建表头配置组件；基于表头配置组件，构建动态多级表头；为动态多级表头创建表头列关系；为动态多级表头创建列设置组件；引入开源组件库中的复选框组和复选框组件，并引入拖拽组件；为动态多级表头配置表格列勾选功能；为动态多级表头配置表格列拖拽功能。本申请的方法，解决了现有技术中的操作繁琐和效率低的问题，使动态多级表头的配置操作更简单快捷，提高工作效率。
技术研发人员：刘会霞
受保护的技术使用者：中国建设银行股份有限公司
技术研发日：
技术公布日：2024/9/23
背景技术：
：：1、随着互联网金融的技术发展，数据量也在快速增长，很多数据需要展示出来供用户进行多方面的数据比对，因此都采用表格的形式生成展示信息。2、现有技术中，在前端开发过程中，经常需要展示数据表格，常使用基于vue3的开源组件库elementplus中的表格组件el-table，生成多级表头。但发明人发现，基础的el-table虽然能支持多级表头，但书写配置麻烦，且不支持动态多级表头，功能也少，随着数据增多，表格列元素过多，与数据相关的操作也随之变得繁琐，影响开发者和用户的工作效率。3、因此，亟需一种动态多级表头列数据处理方法，以解决上述技术问题。技术实现思路1、本技术提供一种动态多级表头列数据处理方法、装置、设备、介质及产品，用以解决现有技术中的操作繁琐和效率低的问题，使动态多级表头的配置操作更简单快捷，提高工作效率。2、第一方面，本技术提供一种动态多级表头列数据处理方法，包括：3、响应于封装操作基于开源组件库中的开源表格组件，构建表头配置组件，其中所述表头配置组件，用于：通过开源用户界面构建框架的组件属性定义函数，定义一个组件传值参数，接收初始数组属性，以配置表格的各个列属性，设置数据属性，以接收表格数据；4、基于所述表头配置组件，构建动态多级表头；5、基于所述表头配置组件，为所述动态多级表头创建表头列关系；6、基于所述表头配置组件，为所述动态多级表头创建列设置组件；7、引入所述开源组件库中的复选框组和复选框组件，并引入拖拽组件；8、基于所述表头配置组件、所述复选框组和复选框组件，为所述动态多级表头配置表格列勾选功能；9、基于所述表头配置组件和所述拖拽组件，为所述动态多级表头配置表格列拖拽功能。10、在一种可能的设计中，所述表头配置组件中包含开源表格数组组件；相应地，所述基于所述表头配置组件，构建动态多级表头，包括：基于所述表头配置组件接收初始数组属性，所述初始数组属性中的每个元素为对象，所述对象中的字段与所述开源表格数组组件接收的参数保持一致；若检测到一个元素中添加有子节点字段且所述子节点字段的字段值不为空并存放于嵌套表头数据中，则所述元素对应的表头为多级表头；若检测到一个元素中的子节点字段为空或无子节点字段，则所述元素对应的表头为普通表头；将所述多级表头和所述普通表头融合为动态多级表头。11、在一种可能的设计中，所述基于所述表头配置组件，为所述动态多级表头创建表头列关系，包括：基于所述表头配置组件，定义一个数组元数据数组，其中所述数组元数据数组的初始值为经过深拷贝后的初始数组；基于所述表头配置组件定义一个键值处理函数，以接收数组元数据数组；对所述数组元数据数组进行格式处理，为所述动态多级表头创建表头列关系。12、在一种可能的设计中，所述对所述数组元数据数组进行格式处理，为所述动态多级表头创建表头列关系，包括：若检测到所述数组元数据数组中的一个元素无身份标识主键，则为所述元素添加身边标识id属性为主键；若检测到所述数组元数据数组中的一个元素有子节点字段并且所述子节点字段的长度不为空，则将所述元素对应的列定为多级表头，并为所述多级表头添加有子节点属性，以及为所述多级表头赋值为t；若检测到所述数组元数据数组中的一个元素无子节点字段或有所述子节点字段但所述子节点字段的长度为空，则将所述元素对应的列定为普通表头；为所述数组元数据数组中每个元素对应的列添加父节点标识属性，所述父节点标识属性的取值为所述元素的上一级元素的标识，若所述元素无上一级元素，则所述父节点标识的属性赋值为根节点；为所述数组元数据数组中每个元素对应的列添加元素所处层级属性；定义一个还原数组，并将所述深拷贝后的数组元数据为所述还原数组赋值。13、在一种可能的设计中，所述基于所述表头配置组件，为所述动态多级表头创建列设置组件，包括：基于所述表头配置组件，定义一个列设置弹窗组件，并通过所述开源用户界面构建框架的组件属性定义函数，定义一个组件传值参数；接收一个数组设置数据属性，其中所述数组设置数据属性的接收值为所述还原数组；定义树状转阵列函数，并接收数组设置数据数组；提取所述数组设置数据数组中的最后一级的生成目标数组，并将所述目标数组作为待进行列设置的表头数据，以完成创建列设置组件。14、在一种可能的设计中，所述基于所述表头配置组件、所述复选框组和复选框组件，为所述动态多级表头配置表格列勾选功能，包括：将所述复选框组和复选框组件引入所述表头配置组件中；基于所述表头配置组件，定义一个勾选项数组，其中所述勾选项数组用于存放响应于用户点击勾选框操作而得到的列字段，所述用户点击勾选框操作后，动态多级列表头通过自定义事件触发函数向所述表头配置组件抛出一个数组设置事件，以传递参数为勾选项数组；基于所述表头配置组件，定义一个同名数组设置函数，其中所述同名数组设置函数用于响应数组设置事件，当所述数组设置函数接收到所述勾选项数组后，将所述勾选项数组与所述勾选项数组进行对比操作，过滤掉所述还原数组中不存在于勾选项数组中的列字段，得到过滤后的列字段赋值给所述数组元数据数组。15、在一种可能的设计中，所述基于所述表头配置组件和所述拖拽组件，为所述动态多级表头配置表格列拖拽功能，包括：将所述拖拽组件封装到所述表头配置组件中，并基于所述表头配置组件定义一个同名数组拖拽函数，以响应设置弹窗的数组拖拽事件；其中所述拖拽组件用于响应于用户拖拽操作后实现拖拽功能，并通过所述自定义事件触发函数向所述表头配置组件抛出一个数组拖拽事件，传递参数为次级数组，其中所述次级数组为所述数组设置数据数组经树状转阵列函数处理后得到的；所述同名数组拖拽函数用于接收所述次级数组；基于所述表头配置组件，定义临时数值数组，并循环遍历所述次级数组，将相邻且上级父节点标识相同的元素分为一组并赋值临时数值数组；基于所述表头配置组件，定义匹配树结构数据函数，以接收所述数值数组和还原数组；当检测到所述次级数组被遍历完之后，生成一个新的临时数组；基于所述表头配置组件，定义用于接收所述新的临时数组的以标识合并数组函数，其中所述以标识合并数组函数还用于：遍历所述新的临时数组，并根据标识属性合并相邻元素，得到目标数组；将所述目标数组赋值给所述数组元数据。16、在一种可能的设计中，所述基于所述表头配置组件、所述复选框组和复选框组件，为所述动态多级表头配置表格列勾选功能的步骤和所述基于所述表头配置组件和所述拖拽组件，为所述动态多级表头配置表格列拖拽功能的步骤同时进行。17、在一种可能的设计中，还包括：利用所述表头配置组件，通过设置根元素绑定指令，保留开源表格组件的自身属性和方法设置。18、第二方面，本技术实施例提供一种动态多级表头列数据处理装置，包括：19、父组件构建模块，用于响应于封装操作基于开源组件库中的开源表格组件，构建表头配置组件，其中所述表头配置组件，用于：通过开源用户界面构建框架的组件属性定义函数，定义一个组件传值参数，接收初始数组属性，以配置表格的各个列属性，设置数据属性，以接收表格数据；20、多级表头生成模块，用于基于所述表头配置组件，构建动态多级表头；21、表头列关系创建模块，用于基于所述表头配置组件，为所述动态多级表头创建表头列关系；22、表头列设置模块，用于基于所述表头配置组件，为所述动态多级表头创建列设置组件；23、所述表头列设置模块，还用于引入所述开源组件库中的复选框组和复选框组件，并引入拖拽组件；24、所述表头列设置模块，还用于基于所述表头配置组件、所述复选框组和复选框组件，为所述动态多级表头配置表格列勾选功能；25、所述表头列设置模块，还用于基于所述表头配置组件和所述拖拽组件，为所述动态多级表头配置表格列拖拽功能。26、第三方面，本技术实施例提供一种电子设备，包括：处理器，以及与所述处理器通信连接的存储器；27、所述存储器存储计算机执行指令；28、所述处理器执行所述存储器存储的计算机执行指令，以实现如第一方面描述的方法。29、第四方面，本技术实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如第一方面描述的方法。30、第五方面，本技术提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现如第一方面描述的方法。31、本技术提供的动态多级表头列数据处理方法、装置、设备、介质及产品，其中，该方法通过基于开源组件库中的开源表格组件，构建表头配置组件，再基于表头配置组件，构建动态多级表头，然后为动态多级表头创建表头列关系和列设置组件，最后配置表格列勾选功能和表格列拖拽功能。表格列勾选功能使得用户可以自定义隐藏不重要的字段，便于用户快速定位到目标数据，表格列拖拽使得用户可自行按照优先级更改列的顺序，便于关注重点字段，使与表格相关的操作更便捷，提高了用户工作效率，提升了用户体验。当前第1页12当前第1页12
技术特征：
1.一种动态多级表头列数据处理方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述表头配置组件中包含开源表格数组组件；
3.根据权利要求1所述的方法，其特征在于，所述基于所述表头配置组件，为所述动态多级表头创建表头列关系，包括：
4.根据权利要求3所述的方法，其特征在于，所述对所述数组元数据数组进行格式处理，为所述动态多级表头创建表头列关系，包括：
5.根据权利要求4所述的方法，其特征在于，所述基于所述表头配置组件，为所述动态多级表头创建列设置组件，包括：
6.根据权利要求5所述的方法，其特征在于，所述基于所述表头配置组件、所述复选框组和复选框组件，为所述动态多级表头配置表格列勾选功能，包括：
7.根据权利要求6所述的方法，其特征在于，所述基于所述表头配置组件和所述拖拽组件，为所述动态多级表头配置表格列拖拽功能，包括：
8.根据权利要求1所述的方法，其特征在于，所述基于所述表头配置组件、所述复选框组和复选框组件，为所述动态多级表头配置表格列勾选功能的步骤和所述基于所述表头配置组件和所述拖拽组件，为所述动态多级表头配置表格列拖拽功能的步骤同时进行。
9.根据权利要求1至8中任一项所述方法，其特征在于，还包括：
10.一种动态多级表头列数据处理装置，其特征在于，包括：
11.一种电子设备，其特征在于，包括：处理器，以及与所述处理器通信连接的存储器；
12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如权利要求1至9中任一项所述的方法。
13.一种计算机程序产品，其特征在于，包括计算机程序，该计算机程序被处理器执行时实现权利要求1至9中任一项所述的方法。
技术总结
本申请提供一种动态多级表头列数据处理方法、装置、设备、介质及产品。涉及数据处理技术领域。该方法包括：构建表头配置组件；基于表头配置组件，构建动态多级表头；为动态多级表头创建表头列关系；为动态多级表头创建列设置组件；引入开源组件库中的复选框组和复选框组件，并引入拖拽组件；为动态多级表头配置表格列勾选功能；为动态多级表头配置表格列拖拽功能。本申请的方法，解决了现有技术中的操作繁琐和效率低的问题，使动态多级表头的配置操作更简单快捷，提高工作效率。
技术研发人员：刘会霞
受保护的技术使用者：中国建设银行股份有限公司
技术研发日：
技术公布日：2024/9/23
最新回复(0)