CN112329412A - 动态控制基于前端技术表格列的方法及装置 - Google Patents
动态控制基于前端技术表格列的方法及装置 Download PDFInfo
- Publication number
- CN112329412A CN112329412A CN202110010730.XA CN202110010730A CN112329412A CN 112329412 A CN112329412 A CN 112329412A CN 202110010730 A CN202110010730 A CN 202110010730A CN 112329412 A CN112329412 A CN 112329412A
- Authority
- CN
- China
- Prior art keywords
- column
- hidden
- columns
- user
- end technology
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种动态控制基于前端技术表格列的方法及装置，该方法，包括：将基于前端技术表格中的父级页面公共的暂无数据和所有列序号抽取到公共表格组件中，在所述公共表格组件中使用插槽占位；对基于前端技术表格中列的隐藏/显示属性值进行动态设置，并将设置的属性值保存在所述公共表格组件中；获取公共表格组件中的预先设置的插槽占位内容，遍历所述插槽占位内容的结果值，获取与所需业务对应的有效结果值，根据所述有效结果值获取对应的属性值进行基于前端技术表格的初始化和渲染，并为用户提供表格可配置弹窗组件，其中，所述表格可配置弹窗组件用于根据用户的操作对基于前端技术表格中列的隐藏/显示属性值进行动态配置。
Description
技术领域
本发明涉及计算机技术领域，尤其是涉及一种动态控制基于前端技术表格列的方法及装置。
背景技术
在现有技术中，基于前端技术的Table表格是开发后台管理系统的常用功能组件，遍布整个系统的各个页面，使用原始table开发页面的传统方式需要重复添加同一个表格在不同页面，这样的开发方式增加了开发者的工作量，也使得系统代码冗余难以维护，项目体积过大，用户使用时性能也较差。随着前端技术的发展，技术框架层出不穷。为了提高了开发效率，目前市面流行框架对表格的处理尚不能满足部分用户的需求。
目前，如果一个表格里有很多列，用户将不能一目了然的抓取目标数据，从而降低了系统的可用性，因此，目前急需一种能够对表格的每一列进行动态配置的技术方案。
发明内容
本发明的目的在于提供一种动态控制基于前端技术表格列的方法及装置，旨在解决现有技术中的上述问题。
本发明提供一种动态控制基于前端技术表格列的方法，包括：
将基于前端技术表格中的父级页面公共的暂无数据和所有列序号抽取到公共表格组件中，并在所述公共表格组件中使用插槽占位；
通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置，并将设置的属性值保存在所述公共表格组件中；
获取公共表格组件中的预先设置的插槽占位内容，遍历所述插槽占位内容的结果值，获取与所需业务对应的有效结果值，根据所述有效结果值获取对应的属性值进行基于前端技术表格的初始化和渲染，并为用户提供表格可配置弹窗组件，其中，所述表格可配置弹窗组件用于根据用户的操作对基于前端技术表格中列的隐藏/显示属性值进行动态配置。
本发明提供一种动态控制基于前端技术表格列的装置，包括：
将基于前端技术表格中的父级页面公共的暂无数据和所有列序号抽取到公共表格组件中，并在所述公共表格组件中使用插槽占位；
通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置，并将设置的属性值保存在所述公共表格组件中；
获取公共表格组件中的预先设置的插槽占位内容，遍历所述插槽占位内容的结果值，获取与所需业务对应的有效结果值，根据所述有效结果值获取对应的属性值进行基于前端技术表格的初始化和渲染，并为用户提供表格可配置弹窗组件，其中，所述表格可配置弹窗组件用于根据用户的操作对基于前端技术表格中列的隐藏/显示属性值进行动态配置。
本发明实施例还提供一种动态控制基于前端技术表格列的装置，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现上述动态控制基于前端技术表格列的方法的步骤。
本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有信息传递的实现程序，所述程序被处理器执行时实现上述动态控制基于前端技术表格列的方法的步骤。
采用本发明实施例，实现了动态列的配置功能，满足了现在多种应用的需求，同时最大程度降低了用户操作的复杂性。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例的动态控制基于前端技术表格列的方法的流程图；
图2是本发明实施例的最终表格呈现效果的示意图；
图3是本发明实施例的动态控制基于前端技术表格列的方法的详细处理流程图；
图4是本发明装置实施例一的动态控制基于前端技术表格列的装置的示意图；
图5是本发明装置实施例二的动态控制基于前端技术表格列的装置的示意图。
具体实施方式
下面将结合实施例对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在本发明的描述中，需要理解的是，术语“中心”、“纵向”、“横向”、“长度”、“宽度”、“厚度”、“上”、“下”、“前”、“后”、“左”、“右”、“坚直”、“水平”、“顶”、“底”、“内”、“外”、“顺时针”、“逆时针”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。
此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、 “第二”的特征可以明示或者隐含地包括一个或者更多个所述特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。此外，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。
方法实施例
根据本发明实施例，提供了一种动态控制基于前端技术表格列的方法，图1是本发明实施例的动态控制基于前端技术表格列的方法的流程图，如图1所示，根据本发明实施例的动态控制基于前端技术表格列的方法具体包括：
步骤101，将基于前端技术表格中的父级页面公共的暂无数据和所有列序号抽取到公共表格组件中，并在公共表格组件中使用插槽占位；
步骤102，通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置，并将设置的属性值保存在公共表格组件中；
在步骤102中，通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置具体包括：
设置是否开启动态列功能，初始值为启用动态列；
设置列可见性，初始值为全可见，并在父级页面表格的每个列标签中设置列键column-key，并使用v-if指令引用对应列键的值，其中，列键的值从0开始；
设置初始隐藏的列的下标数组，其中，列下标从0开始；
设置禁止隐藏的列的下标数组，其中，列下标从0开始；
设置是否在表格配置中显示禁止隐藏的列信息，初始值为显示。
步骤103，获取公共表格组件中的预先设置的插槽占位内容，遍历插槽占位内容的结果值，获取与所需业务对应的有效结果值，根据有效结果值获取对应的属性值进行基于前端技术表格的初始化和渲染，并为用户提供表格可配置弹窗组件，其中，表格可配置弹窗组件用于根据用户的操作对基于前端技术表格中列的隐藏/显示属性值进行动态配置。
在本发明实施例中，当用户通过表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，可以根据用户的操作过滤出需要隐藏的列和／或显示的列，并更新基于前端技术表格。
当用户通过表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，可以记录用户操作，并获取当前的可见列及隐藏列进行缓存；在用户进入除当前前端页面的另一个或多个前端页面时，将缓存的可见列及隐藏列保存到磁盘中。
此外，在本发明实施例中，还可以计算前端页面的平均载入时间，当用户在操作下个前端页面时，当前浏览器版本前端页面的呈现时间大于平均载入时间时，关闭基于前端技术表格的隐藏/显示属性值动态配置功能。
当用户进入前端页面进行隐藏/显示属性值动态配置时，记录每个前端页面的总列数，并求出n个前端页面的列数平均值，获取根据当前基于前端技术表格展示列的数量，当数量大于或等于列数平均值时，将缓存的可见列及隐藏列保存到indexedDB中，当数量小于列数平均值时，将缓存的可见列及隐藏列保存到LocalStorage中。
以下结合附图，对本发明实施例的上述技术方案进行详细说明。
本发明实施例的技术方案包括以下几部分：父页面中的各列以插槽的形式在表格组件中占位、动态获取插槽内容、使用缓存保留用户配置等部分。具体包括以下步骤：
步骤A：表格中将各个父级页面公共的暂无数据及所有的列序号抽离在公共组件里，使用slot插槽占位允许插入更多列的内容。
步骤B：通过表格字段定制功能动态设置展示列，并定义表格组件接收属性值字段。
a：属性1，开启动态列功能，默认设置属性为true，即启用动态列。
b：属性2，设置列可见性，初始为全true，并在父页面表格的每个列标签中设置column-key，使用v-if指令引用对应column-key的值，column-key从0开始。
c：属性3，设置初始隐藏的列的下标数组，列下标从0开始。
d：属性4，设置禁止隐藏的列的下标数组，列下标从0开始。
e：属性5，设置是否在表格配置中显示禁止隐藏的列信息，默认值为true即显示。
步骤C：封装表格可配置弹窗组件。
a：在表格组件的执行函数里获取表格插槽内容，遍历其结果值，经过具体业务判断根据有效结果初始化步骤B中的属性值，并动态渲染父级页面的表格。
b：实时监听可见列的下标集合，过滤出需要隐藏和显示的列，并更新表格。
步骤D：存储用户配置数据。
a：当用户操作表格配置组件时，记录用户行为，即是否选中某一列，及时触发代码存储装置，缓存可见列及隐藏列。
b：在缓存装置中分情况处理用户进入一个页面，多个页面的情形，并存入磁盘中，确保用户刷新后自定义配置不丢失。
采用本发明实施例的上述技术方案，最终得到如图2所示的表格。
在实际开发时，如图3所示，需要执行如下处理：
S1、创建一个vue文件，写好动态列配置弹窗容器div1及表格容器div2，并在div2中定义空数据div、序号列及默认插槽slot。
S2、在props属性中定义上述属性值，并初始化默认值。
S3、在mounted钩子函数里通过表格的ref获取默认插槽的内容，遍历结果值，当结果值的属性componentOptions不为undefined时，获取propsData，当propsData的属性值label不为undefined，type不为selection（复选框）及index时，存入初始展示的列数组，反之存入。
S4、在父页面中引入功能的表格组件，传递展示的列数组属性，初始值都为true，并设置表格中的每一列的column-key的值，默认从0开始，逐个累加。
S5、建立一个用户浏览器性能评估器，在父级页面的顶部放一段 JavaScript 代码，记下当前时间 t0，然后在页面 onload 时再计算当前时间与 t0 的时间差，这个时间差即为页面1加载时间r1。以此类推，计算出用户操作的n个页面的加载时间并存储在全局数组中，求出平均载入时间a1，当用户在操作下个页面时，当前浏览器版本render时间大于a1时，将不开启v-if功能，反之在父页面表格列中通过v-if根据column-key控制列的显隐。
S6、建立一个列性能评估器，当用户进入页面，动态设置列属性时，记录每个页面的总列数，并求出n个页面的平均值s1，根据展示列的数量c1，当c1大于平均值s1时，将用户配置数据存储在indexedDB中，反之存储于LocalStorage中。
S7、结束。
综上所述，本发明实施例根据不同页面的表格数据，可以在公共表格组件中显示不同页面的列内容；用户在页面点击表格的配置按钮时，可以获取到父页面的各个表头数据；用户切换各个页面时保留自己在该页面的配置选项，提高了开发效率，满足了用户的使用需求。
装置实施例一
根据本发明实施例，提供了一种动态控制基于前端技术表格列的装置，图4是本发明实施例的动态控制基于前端技术表格列的装置的示意图，如图4所示，根据本发明实施例的动态控制基于前端技术表格列的装置具体包括：
公共表格组件模块40，用于将基于前端技术表格中的父级页面公共的暂无数据和所有列序号抽取到公共表格组件中，并在所述公共表格组件中使用插槽占位；
属性设置模块42，用于通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置，并将设置的属性值保存在所述公共表格组件中；所述属性设置模块42具体用于：
设置是否开启动态列功能，初始值为启用动态列；
设置列可见性，初始值为全可见，并在父级页面表格的每个列标签中设置列键column-key，并使用v-if指令引用对应列键的值，其中，列键的值从0开始；
设置初始隐藏的列的下标数组，其中，列下标从0开始；
设置禁止隐藏的列的下标数组，其中，列下标从0开始；
设置是否在表格配置中显示禁止隐藏的列信息，初始值为显示；
初始化渲染模块44，用于获取公共表格组件中的预先设置的插槽占位内容，遍历所述插槽占位内容的结果值，获取与所需业务对应的有效结果值，根据所述有效结果值获取对应的属性值进行基于前端技术表格的初始化和渲染，并为用户提供表格可配置弹窗组件，其中，所述表格可配置弹窗组件用于根据用户的操作对基于前端技术表格中列的隐藏/显示属性值进行动态配置。
根据本发明实施例的装置进一步包括：
更新模块，用于当用户通过所述表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，根据用户的操作过滤出需要隐藏的列和／或显示的列，并更新基于前端技术表格；
保存模块，用于当用户通过所述表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，记录用户操作，并获取当前的可见列及隐藏列进行缓存；在用户进入除当前前端页面的另一个或多个前端页面时，将缓存的可见列及隐藏列保存到磁盘中；
功能关闭模块，用于计算前端页面的平均载入时间，当用户在操作下个前端页面时，当前浏览器版本前端页面的呈现时间大于平均载入时间时，关闭基于前端技术表格的隐藏/显示属性值动态配置功能；
所述保存模块进一步用于：
当用户进入前端页面进行隐藏/显示属性值动态配置时，记录每个前端页面的总列数，并求出n个前端页面的列数平均值，获取根据当前基于前端技术表格展示列的数量，当所述数量大于或等于列数平均值时，将缓存的可见列及隐藏列保存到indexedDB中，当所述数量小于列数平均值时，将缓存的可见列及隐藏列保存到LocalStorage中。
本发明实施例是与上述方法实施例对应的装置实施例，各个模块的具体操作可以参照方法实施例的描述进行理解，在此不再赘述。
装置实施例二
本发明实施例提供一种动态控制基于前端技术表格列的装置，如图5所示，包括：存储器50、处理器52及存储在所述存储器50上并可在所述处理器52上运行的计算机程序，所述计算机程序被所述处理器52执行时实现如下方法步骤：
步骤101，将基于前端技术表格中的父级页面公共的暂无数据和所有列序号抽取到公共表格组件中，并在公共表格组件中使用插槽占位；
步骤102，通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置，并将设置的属性值保存在公共表格组件中；
在步骤102中，通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置具体包括：
设置是否开启动态列功能，初始值为启用动态列；
设置列可见性，初始值为全可见，并在父级页面表格的每个列标签中设置列键column-key，并使用v-if指令引用对应列键的值，其中，列键的值从0开始；
设置初始隐藏的列的下标数组，其中，列下标从0开始；
设置禁止隐藏的列的下标数组，其中，列下标从0开始；
设置是否在表格配置中显示禁止隐藏的列信息，初始值为显示。
步骤103，获取公共表格组件中的预先设置的插槽占位内容，遍历插槽占位内容的结果值，获取与所需业务对应的有效结果值，根据有效结果值获取对应的属性值进行基于前端技术表格的初始化和渲染，并为用户提供表格可配置弹窗组件，其中，表格可配置弹窗组件用于根据用户的操作对基于前端技术表格中列的隐藏/显示属性值进行动态配置。
在本发明实施例中，当用户通过表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，可以根据用户的操作过滤出需要隐藏的列和／或显示的列，并更新基于前端技术表格。
当用户通过表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，可以记录用户操作，并获取当前的可见列及隐藏列进行缓存；在用户进入除当前前端页面的另一个或多个前端页面时，将缓存的可见列及隐藏列保存到磁盘中。
此外，在本发明实施例中，还可以计算前端页面的平均载入时间，当用户在操作下个前端页面时，当前浏览器版本前端页面的呈现时间大于平均载入时间时，关闭基于前端技术表格的隐藏/显示属性值动态配置功能。
当用户进入前端页面进行隐藏/显示属性值动态配置时，记录每个前端页面的总列数，并求出n个前端页面的列数平均值，获取根据当前基于前端技术表格展示列的数量，当数量大于或等于列数平均值时，将缓存的可见列及隐藏列保存到indexedDB中，当数量小于列数平均值时，将缓存的可见列及隐藏列保存到LocalStorage中。
装置实施例三
本发明实施例提供一种计算机可读存储介质，所述计算机可读存储介质上存储有信息传输的实现程序，所述程序被处理器52执行时实现如下方法步骤：
步骤101，将基于前端技术表格中的父级页面公共的暂无数据和所有列序号抽取到公共表格组件中，并在公共表格组件中使用插槽占位；
步骤102，通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置，并将设置的属性值保存在公共表格组件中；
在步骤102中，通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置具体包括：
设置是否开启动态列功能，初始值为启用动态列；
设置列可见性，初始值为全可见，并在父级页面表格的每个列标签中设置列键column-key，并使用v-if指令引用对应列键的值，其中，列键的值从0开始；
设置初始隐藏的列的下标数组，其中，列下标从0开始；
设置禁止隐藏的列的下标数组，其中，列下标从0开始；
设置是否在表格配置中显示禁止隐藏的列信息，初始值为显示。
步骤103，获取公共表格组件中的预先设置的插槽占位内容，遍历插槽占位内容的结果值，获取与所需业务对应的有效结果值，根据有效结果值获取对应的属性值进行基于前端技术表格的初始化和渲染，并为用户提供表格可配置弹窗组件，其中，表格可配置弹窗组件用于根据用户的操作对基于前端技术表格中列的隐藏/显示属性值进行动态配置。
在本发明实施例中，当用户通过表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，可以根据用户的操作过滤出需要隐藏的列和／或显示的列，并更新基于前端技术表格。
当用户通过表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，可以记录用户操作，并获取当前的可见列及隐藏列进行缓存；在用户进入除当前前端页面的另一个或多个前端页面时，将缓存的可见列及隐藏列保存到磁盘中。
此外，在本发明实施例中，还可以计算前端页面的平均载入时间，当用户在操作下个前端页面时，当前浏览器版本前端页面的呈现时间大于平均载入时间时，关闭基于前端技术表格的隐藏/显示属性值动态配置功能。
当用户进入前端页面进行隐藏/显示属性值动态配置时，记录每个前端页面的总列数，并求出n个前端页面的列数平均值，获取根据当前基于前端技术表格展示列的数量，当数量大于或等于列数平均值时，将缓存的可见列及隐藏列保存到indexedDB中，当数量小于列数平均值时，将缓存的可见列及隐藏列保存到LocalStorage中。
本实施例所述计算机可读存储介质包括但不限于为：ROM、RAM、磁盘或光盘等。
显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。
Claims (10)
1.一种动态控制基于前端技术表格列的方法，其特征在于，包括：
将基于前端技术表格中的父级页面公共的暂无数据和所有列序号抽取到公共表格组件中，并在所述公共表格组件中使用插槽占位；
通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置，并将设置的属性值保存在所述公共表格组件中；
获取公共表格组件中的预先设置的插槽占位内容，遍历所述插槽占位内容的结果值，获取与所需业务对应的有效结果值，根据所述有效结果值获取对应的属性值进行基于前端技术表格的初始化和渲染，并为用户提供表格可配置弹窗组件，其中，所述表格可配置弹窗组件用于根据用户的操作对基于前端技术表格中列的隐藏/显示属性值进行动态配置。
2.根据权利要求1所述的方法，其特征在于，通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置具体包括：
设置是否开启动态列功能，初始值为启用动态列；
设置列可见性，初始值为全可见，并在父级页面表格的每个列标签中设置列键column-key，并使用v-if指令引用对应列键的值，其中，列键的值从0开始；
设置初始隐藏的列的下标数组，其中，列下标从0开始；
设置禁止隐藏的列的下标数组，其中，列下标从0开始；
设置是否在表格配置中显示禁止隐藏的列信息，初始值为显示。
3.根据权利要求1所述的方法，其特征在于，所述方法进一步包括：
当用户通过所述表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，根据用户的操作过滤出需要隐藏的列和／或显示的列，并更新基于前端技术表格。
4.根据权利要求1所述的方法，其特征在于，所述方法进一步包括：
当用户通过所述表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，记录用户操作，并获取当前的可见列及隐藏列进行缓存；
在用户进入除当前前端页面的另一个或多个前端页面时，将缓存的可见列及隐藏列保存到磁盘中。
5.根据权利要求1所述的方法，其特征在于，所述方法进一步包括：
计算前端页面的平均载入时间，当用户在操作下个前端页面时，当前浏览器版本前端页面的呈现时间大于平均载入时间时，关闭基于前端技术表格的隐藏/显示属性值动态配置功能。
6.根据权利要求4所述的方法，其特征在于，所述方法进一步包括：
当用户进入前端页面进行隐藏/显示属性值动态配置时，记录每个前端页面的总列数，并求出n个前端页面的列数平均值，获取根据当前基于前端技术表格展示列的数量，当所述数量大于或等于列数平均值时，将缓存的可见列及隐藏列保存到indexedDB中，当所述数量小于列数平均值时，将缓存的可见列及隐藏列保存到LocalStorage中。
7.一种动态控制基于前端技术表格列的装置，其特征在于，包括：
公共表格组件模块，用于将基于前端技术表格中的父级页面公共的暂无数据和所有列序号抽取到公共表格组件中，并在所述公共表格组件中使用插槽占位；
属性设置模块，用于通过表格字段定制功能对基于前端技术表格中列的隐藏/显示属性值进行动态设置，并将设置的属性值保存在所述公共表格组件中；
初始化渲染模块，用于获取公共表格组件中的预先设置的插槽占位内容，遍历所述插槽占位内容的结果值，获取与所需业务对应的有效结果值，根据所述有效结果值获取对应的属性值进行基于前端技术表格的初始化和渲染，并为用户提供表格可配置弹窗组件，其中，所述表格可配置弹窗组件用于根据用户的操作对基于前端技术表格中列的隐藏/显示属性值进行动态配置。
8.根据权利要求7所述的装置，其特征在于，
所述属性设置模块具体用于：
设置是否开启动态列功能，初始值为启用动态列；
设置列可见性，初始值为全可见，并在父级页面表格的每个列标签中设置列键column-key，并使用v-if指令引用对应列键的值，其中，列键的值从0开始；
设置初始隐藏的列的下标数组，其中，列下标从0开始；
设置禁止隐藏的列的下标数组，其中，列下标从0开始；
设置是否在表格配置中显示禁止隐藏的列信息，初始值为显示；
所述装置进一步包括：
更新模块，用于当用户通过所述表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，根据用户的操作过滤出需要隐藏的列和／或显示的列，并更新基于前端技术表格；
保存模块，用于当用户通过所述表格可配置弹窗组件对基于前端技术表格中列的隐藏/显示属性值进行动态配置时，记录用户操作，并获取当前的可见列及隐藏列进行缓存；在用户进入除当前前端页面的另一个或多个前端页面时，将缓存的可见列及隐藏列保存到磁盘中；
功能关闭模块，用于计算前端页面的平均载入时间，当用户在操作下个前端页面时，当前浏览器版本前端页面的呈现时间大于平均载入时间时，关闭基于前端技术表格的隐藏/显示属性值动态配置功能；
所述保存模块进一步用于：
当用户进入前端页面进行隐藏/显示属性值动态配置时，记录每个前端页面的总列数，并求出n个前端页面的列数平均值，获取根据当前基于前端技术表格展示列的数量，当所述数量大于或等于列数平均值时，将缓存的可见列及隐藏列保存到indexedDB中，当所述数量小于列数平均值时，将缓存的可见列及隐藏列保存到LocalStorage中。
9.一种动态控制基于前端技术表格列的装置，其特征在于，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至6中任一项所述的动态控制基于前端技术表格列的方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有信息传递的实现程序，所述程序被处理器执行时实现如权利要求1至6中任一项所述的动态控制基于前端技术表格列的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110010730.XA CN112329412B (zh) | 2021-01-06 | 2021-01-06 | 动态控制基于前端技术表格列的方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110010730.XA CN112329412B (zh) | 2021-01-06 | 2021-01-06 | 动态控制基于前端技术表格列的方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112329412A true CN112329412A (zh) | 2021-02-05 |
| CN112329412B CN112329412B (zh) | 2021-06-29 |
Family
ID=74302520
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110010730.XA Active CN112329412B (zh) | 2021-01-06 | 2021-01-06 | 动态控制基于前端技术表格列的方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112329412B (zh) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9436671B2 (en) * | 2009-02-11 | 2016-09-06 | Microsoft Technology Licensing, Llc | Displaying multiple row and column header areas in a summary table |
| CN107656914A (zh) * | 2017-10-16 | 2018-02-02 | 厦门海迈科技股份有限公司 | 可配置化的表格生成方法、装置、终端设备及存储介质 |
-
2021
- 2021-01-06 CN CN202110010730.XA patent/CN112329412B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9436671B2 (en) * | 2009-02-11 | 2016-09-06 | Microsoft Technology Licensing, Llc | Displaying multiple row and column header areas in a summary table |
| CN107656914A (zh) * | 2017-10-16 | 2018-02-02 | 厦门海迈科技股份有限公司 | 可配置化的表格生成方法、装置、终端设备及存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| 杨冠标: "vue中的插槽（slot）", 《HTTPS://WWW.CNBLOGS.COM/YANGGB/P/12439115.HTML》 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112329412B (zh) | 2021-06-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111552473B (zh) | 一种应用程序的处理方法、装置及设备 | |
| CN107656914B (zh) | 可配置化的表格生成方法、装置、终端设备及存储介质 | |
| CN106339226B (zh) | 一种网页页面的展示方法和页面展示装置 | |
| WO2020048326A1 (zh) | 一种界面显示方法、系统及终端设备 | |
| CN103020025A (zh) | 用于文档内容的自动动画化的技术 | |
| WO2012177853A2 (en) | Temporal task-based tab management | |
| CN112272109A (zh) | 一种网络拓扑图生成方法、设备及系统 | |
| CN112764752A (zh) | 页面的展示方法和装置、存储介质、电子装置 | |
| CN112099891A (zh) | 弹窗展示方法、装置、电子设备及计算机可读存储介质 | |
| CN107609175B (zh) | Dom树生成方法以及相关设备 | |
| CN115543282A (zh) | 页面代码的生成方法、装置、存储介质及计算机设备 | |
| CN114579912A (zh) | 页面布局方法、装置、设备及介质 | |
| CN113407254B (zh) | 表单生成方法、装置、电子设备及存储介质 | |
| CN112784529B (zh) | 基于BetterScroll的移动端排序表格及其构建方法 | |
| CN104462452A (zh) | 页面显示的方法及装置 | |
| US10956026B2 (en) | Smart element filtering method via gestures | |
| CN112329412B (zh) | 动态控制基于前端技术表格列的方法及装置 | |
| CN106293369A (zh) | 基于弹幕的交互方法、交互装置及用户设备 | |
| CN110333859B (zh) | 页面创建方法、装置、电子设备和计算机可读存储介质 | |
| CN107239212A (zh) | 分段选择视图呈现方法、装置及用户终端 | |
| CN116932829A (zh) | 针对开发者的支持大数据树形视图组件的解决方案 | |
| US11574001B2 (en) | Method and apparatus for generating unordered list, method for managing images and terminal device | |
| JP6994138B2 (ja) | 情報管理装置並びにファイル管理方法 | |
| CN111177609B (zh) | 页面中显示三维数据表格的处理方法、装置及电子设备 | |
| CN114995699A (zh) | 一种界面交互方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP01 | Change in the name or title of a patent holder |
Address after: 100089 room 1408, 14 / F, No.9, North Fourth Ring Road West, Haidian District, Beijing Patentee after: Beijing kuaicheng Technology Co.,Ltd. Address before: 100089 room 1408, 14 / F, No.9, North Fourth Ring Road West, Haidian District, Beijing Patentee before: Beijing kuaisheng Technology Co.,Ltd. |
|
| CP01 | Change in the name or title of a patent holder |