el-table制造技术

本申请提出了

【技术实现步骤摘要】
el
‑
table动态层级表头、数据合并方法及其应用


[0001]本申请涉及
web
应用开发
，特别是涉及
el
‑
table
动态层级表头
、
数据合并方法及其应用
。

技术介绍

[0002]在现有的
Web
开发中，表格是一种常见的数据展示方式
。el
‑
table
是饿了么团队开发的一个流行的
Vue
组件库，用于在前端开发中展示数据表格
。
尽管
el
‑
table
组件在许多情况下都能够满足基本的表格展示需求，但在某些特定情况下，它可能存在一些局限性
。
两个主要的局限性是：
[0003]动态层级表头：
el
‑
table
目前无法直接支持动态层级表头的功能
。
动态层级表头是指表格中的表头可以根据数据动态生成，通常用于展示复杂的数据结构或树状数据
。
[0004]数据合并：
el
‑
table
目前也无法直接支持单元格数据合并的需求
。
数据合并是指将相邻或符合某种条件的单元格合并为一个单元格，从而展示更加紧凑和易读的表格
。
[0005]且目前的
el
‑
table
组件还具有过多地判断指定字段
、
指定行列进行合并以及表头基本上是在
tableHeader
中定死字段，无法进行动态拓展，当需求变化的时候需要改动代码重新发布不灵活等问题
。
[0006]因此，亟待一种基于
el
‑
table
的动态层级表头
、
数据合并方法及其应用，以使得用户可以根据需要动态生成多级表头，并实现行合并和列合并的功能
。

技术实现思路

[0007]本申请实施例提供了
el
‑
table
动态层级表头
、
数据合并方法及其应用，针对目前技术无法直接支持动态层级表头和数据合并的需求的问题
。
[0008]本专利技术核心技术主要是通过在
Vue
组件中使用动态生成表头和数据合并的功能，结合渲染函数和
JSX
，进行条件判断和数据处理，并利用数据结构和算法来实现表格的动态表头和单元格合并
。
[0009]第一方面，本申请提供了
el
‑
table
动态层级表头
、
数据合并方法，所述方法包括以下步骤：
[0010]S00、
在
data
函数中定义
staticFields
数组，用于存储不需要动态生成的静态字段，其中每个字段由一个对象表示，包括
label
属性和
prop
属性；
[0011]S10、
定义
tableData
数组来接收服务端返回的列表数据，并将服务端返回数据赋值给
tableData
数组，该数组包含多个
JSON
对象，每个
JSON
对象包含最大深度字段
maxLevel
以及动态数据字段和静态字段；
[0012]其中，定义
tableHeader
为数组存储列表头部；定义
rowAndColArray
为数组接收整个
tableData
数据的包含
rowspan
信息和
colspan
信息；定义
maxLevel
为数字最大深度；定义
colFields
数组存储要进行列合并的字段；
rowspan
表示单元格纵向合并的单元格数，
colspan
表示单元格横向合并的单元格数；
[0013]S20、
根据
tableData
数组动态生成表头数据，并找出最大深度
maxLevel
，返回包含动态表头数据的数组，并将找出的最大深度
maxLevel
赋值给
S10
步骤中定义的最大深度字段
maxLevel
；
[0014]S30、
根据返回的动态表头数据生成包含
label
属性和
prop
属性的对象数组，用于定义并构建表格的列信息；
[0015]其中，
label
属性作为表头的显示名称，
prop
属性作为表头对应的数据字段；
[0016]S40、
定义
spanMethod
函数，该
spanMethod
函数通过接收
tableData
数组
、colFields
数组
、rowIndex、columnIndex
和
rowAndColArray
数组，计算单元格的合并信息并返回包含
rowspan
信息和
colspan
信息的
rowAndColArray
数组作为结果；
[0017]其中，
colFields
数组包含表格的列字段或标题；
rowIndex
表示指定要检索跨度值的行的索引；
columnIndex
表示指定要检索跨度值的列的索引；
rowAndColArray
数组用于存储表格中每个单元格的跨度值；
[0018]S50、
根据
staticFields
数组的
prop
属性和
S40
步骤的返回结果，生成
colFields
数组，用于定义表格的列字段；将
S40
步骤获取到的动态表头对象数组与
staticFields
数组合并为
tableHeader
数组，用于定义整个表格的表头；
[0019]S60、
获取每一行数据的
rowspan
信息和
colspan
信息，根据表格数据和字段处理需要合并的单元格信息；
[0020]S70、
调用
el
‑
table
暴露的
span
‑
method
合并行或列的计算方法，返回
row,column,rowIndex,columnIndex
，将这些参数以及
S4本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.el
‑
table
动态层级表头
、
数据合并方法，其特征在于，包括以下步骤：
S00、
在
data
函数中定义
staticFields
数组，用于存储不需要动态生成的静态字段，其中每个字段由一个对象表示，包括
label
属性和
prop
属性；
S10、
定义
tableData
数组来接收服务端返回的列表数据，并将所述服务端返回数据赋值给所述
tableData
数组，该数组包含多个
JSON
对象，每个
JSON
对象包含最大深度字段
maxLevel
以及动态数据字段和静态字段；其中，定义
tableHeader
为数组存储列表头部；定义
rowAndColArray
为数组接收整个
tableData
数据的包含
rowspan
信息和
colspan
信息；定义
maxLevel
为数字最大深度；定义
colFields
数组存储要进行列合并的字段；
rowspan
表示单元格纵向合并的单元格数，
colspan
表示单元格横向合并的单元格数；
S20、
根据所述
tableData
数组动态生成表头数据，并找出最大深度
maxLevel
，返回包含动态表头数据的数组，并将找出的最大深度
maxLevel
赋值给
S10
步骤中定义的最大深度字段
maxLevel
；
S30、
根据返回的动态表头数据生成包含
label
属性和
prop
属性的对象数组，用于定义并构建表格的列信息；其中，
label
属性作为表头的显示名称，
prop
属性作为表头对应的数据字段；
S40、
定义
spanMethod
函数，该
spanMethod
函数通过接收
tableData
数组
、colFields
数组
、rowIndex、columnIndex
和
rowAndColArray
数组，计算单元格的合并信息并返回包含
rowspan
信息和
colspan
信息的
rowAndColArray
数组作为结果；其中，
colFields
数组包含表格的列字段或标题；
rowIndex
表示指定要检索跨度值的行的索引；
columnIndex
表示指定要检索跨度值的列的索引；
rowAndColArray
数组用于存储表格中每个单元格的跨度值；
S50、
根据所述
staticFields
数组的
prop
属性和
S40
步骤的返回结果，生成
colFields
数组，用于定义表格的列字段；将
S40
步骤获取到的动态表头对象数组与所述
staticFields
数组合并为
tableHeader
数组，用于定义整个表格的表头；
S60、
获取每一行数据的
rowspan
信息和
colspan
信息，根据表格数据和字段处理需要合并的单元格信息；
S70、
调用
el
‑
table
暴露的
span
‑
method
合并行或列的计算方法，返回
row,column,rowIndex,columnIndex
，将这些参数以及
S40
步骤返回的
rowAndColArray
数组传入所述
spanMethod
函数，得到最终的单元格合并信息；其中，
row
表示表格中的行；
column
表示表格中的列
。2.
如权利要求1所述的
el
‑
table
动态层级表头
、
数据合并方法，其特征在于，
S20
步骤中，定义
getDynamicArrayAndMaxLevel
函数，通过接收一个参数
tableData
数组，返回动态表头数据和最大深度
maxLevel。3.
如权利要求1所述的
el
‑
table
动态层级表头
、
数据合并方法，其特征在于，
S30
步骤中，定义
getTableHeader
函数，通过接收动态表头字段数组
newArray
，用于生成动态表格的表头信息，函数内部使用
chineseToNumbers
函数将索引转换为中文数字，并返回包含
label
属性和
prop
属性的对象，用于定义表格的列信息
。4.
如权利要求1所述的
el
‑
table
动态层级表头
、
数据合并方法，其特征在于，
S40
步骤
中，所述
spanMethod
函数通过公式：
rowIndex*colFields.length+columnIndex
，访问
rowAndColArray
来检索指定行和列的跨度值；其中，
colFields.length
用于根据列的数量计算偏移量，
colFieldsLength
是
colFields
数组的长度；
rowAndColArray
是用于存储每个单元格的
rowspan
值和
colspan
值的数组
。5.
如权利要求4所述的
el
‑
table
动态层级表头
、
数据合并方法，其特征在于，
S40
步骤中，定义
getRowAndCol
函数，通过接收
tableData
数组和
colFields
数组生成表格对应每个单元格的
rowspan
信息和
colspan
信息；其中，
tableData
表示表格数据，
colFields
表示要进行列合并的字段数组
。6.
如权利要求1‑5任意一项所述的
el
‑
table
动态层级表头
、
数据合并方法，其特征在于，
S40
步骤中，若当前行是第一行，则为每个列字段添加初始的...

【专利技术属性】
技术研发人员：郁强，程立勇，黄红叶，谢淼烽，
申请(专利权)人：城云科技中国有限公司，
类型：发明
国别省市：