CN112506493A - 一种基于vue的表格配置方法、装置、设备和介质 - Google Patents

Abstract

本发明提供一种基于vue的表格配置方法、装置、设备和介质，方法包括下述步骤：在配置界面上提供表格控件和属性配置区，当表格控件被选择时响应一控件配置内容展示框；属性配置区提供的所有属性配置项均有属性文字化描述；属性配置区提供模板属性和控件属性；模板属性供用户选择数据来源，包括从本地数据集、远端数据和自定义动态列数据；其中，当从本地数据集和远端数据获取到的列不足以满足用户需求的时候考虑使用自定义动态列数据；控件属性还提供自定义render函数和增强的配置项，供用户自己定义可编辑表的表头或内容以及实现各种功能；在配置完成后，将配置的数据和表格动态展示列均通过api渲染到表格上。从而使得整个表格配置工作变得更加的简单、高效。

Description

一种基于vue的表格配置方法、装置、设备和介质

技术领域

本发明涉及计算机技术领域，特别涉及一种基于vue的表格配置方法、装置、设备和介质。

背景技术

vxe-table是面向现代浏览器(简洁、高效的API设计)，具有强大的功能的同时又兼具较好的性能，比如可支持横向、纵向虚拟滚动、灵活的配置项、不污染全局样式及变量等，可以实现表格的一切实用的功能。但目前vxe-table仍存在如下缺点：

1、要求用户需要掌握一定的编程基础，才能完成表格的配置；

2、vxe-table列都是固定写死的，配置也都是固定的，若要修改表格配置或者列配置时都需要去修改它的代码，不够灵活，无法个性化地配置整张表；

3、其配置界面很多情况下只针对当前使用配置做介绍，其余配置在使用时需要去官网翻阅专门的文档查看属性，影响用户的配置效率。如图1所示，比如在进行合并功能的配置时，配置界面上属性介绍时就只介绍合并是通过什么方法合并，但其它用到的配置项要去官网翻阅。

4、当实际业务需求发生改变时，例如列的变更，表格配置的修改等，往往需要去修改代码然后重新布包再上线，因此在应用上具有一定的制约。

因此为了能有效提升vxe-table配置的工作效率，使得整个工作变得更加的简单、高效，所以有了本发明。

发明内容

本发明要解决的技术问题，在于提供一种基于vue的表格配置方法、装置、设备和介质，基于vue的基础上引入vxe-table表格做配置，使得整个表格配置工作变得更加的简单、高效。

第一方面，本发明提供了一种基于vue的表格配置方法，在配置界面上提供表格控件和属性配置区，当表格控件被选择时响应一控件配置内容展示框；所述属性配置区提供的所有属性配置项均有属性文字化描述；所述属性配置区提供模板属性和控件属性；

所述属性配置区供用户选择数据来源，包括从本地数据集、远端数据和自定义动态列数据三种；其中，当从本地数据集和远端数据获取到的列不足以满足用户需求的时候考虑使用自定义动态列数据；

(1)若用户选择本地数据集，则先通过所述模板属性提供包括列配置、选择控件类型、快速配置和新增按钮的配置项；所述列配置用于选择可操作的字段；所述选择控件类型用于配置可编辑表单元格类型，及快速配置操作列新增或修改的内容，或者快速配置表格需要导出的列和需要做计算的列；所述新增按钮用于添加本地数据集中不存在的，但页面需要展示的列；然后通过所述控件属性提供包括表类型、表格配置和预览的配置项；所述表类型用于选择表格的类型，包括普通表、树表和可编辑表；所述表格配置用于选择表格需要展示的列；所述预览用于查看配置效果；

(2)若用户选择远端数据，则先通过所述模板属性提供远端数据开关、请求路径、方式和参数的配置项，所述远端数据开关打开时，允许对远端数据进一步配置远端数据的请求路径，方式和参数，在获取远端数据后，先通过所述模板属性提供包括所述列配置的配置项，再通过所述控件属性提供包括所述表格配置的配置项；

(3)若用户选择自定义动态列数据，通过所述控件属性提供增强配置项，供设置动态列表格列数组，数组中的一条数据代表表格上的一个列，列内容包含必填的列字段和标签名称以及非必填的对齐方式宽度设置，然后调用动态列展示api渲染表格列；

所述控件属性还提供自定义render函数和增强的配置项，所述自定义render函数供用户自己定义可编辑表的表头或内容；所述增强供用户在编辑器上编写执行的脚本，以实现增强配置功能；

在配置完成后，将配置的数据和表格动态展示列均通过api渲染到表格上。

第二方面，本发明提供了一种一种基于vue的表格配置装置，包括表格控件、属性配置区和api渲染模块：

所述表格控件，位于配置界面上，在被选择时响应一控件配置内容展示框；

所述属性配置区，在配置界面上提供属性配置项，包括模板属性和控件属性，且所有均有属性文字化描述；

所述属性配置区供用户选择数据来源，包括从本地数据集、远端数据和自定义动态列数据三种；其中，当从本地数据集和远端数据获取到的列不足以满足用户需求的时候考虑使用自定义动态列数据；

(1)若用户选择本地数据集，则先通过所述模板属性提供包括列配置、选择控件类型、快速配置和新增按钮的配置项；所述列配置用于选择可操作的字段；所述选择控件类型用于配置可编辑表单元格类型，及快速配置操作列新增或修改的内容，或者快速配置表格需要导出的列和需要做计算的列；所述新增按钮用于添加本地数据集中不存在的，但页面需要展示的列；然后通过所述控件属性提供包括表类型、表格配置和预览的配置项；所述表类型用于选择表格的类型，包括普通表、树表和可编辑表；所述表格配置用于选择表格需要展示的列；所述预览用于查看配置效果；

(2)若用户选择远端数据，则先通过所述模板属性提供远端数据开关、请求路径、方式和参数的配置项，所述远端数据开关打开时，允许对远端数据进一步配置远端数据的请求路径，方式和参数，在获取远端数据后，先通过所述模板属性提供包括所述列配置的配置项，再通过所述控件属性提供包括所述表格配置的配置项；

(3)若用户选择自定义动态列数据，通过所述控件属性提供增强配置项，供设置动态列表格列数组，数组中的一条数据代表表格上的一个列，列内容包含必填的列字段和标签名称以及非必填的对齐方式宽度设置，然后调用动态列展示api渲染表格列；

所述控件属性还提供自定义render函数和增强的配置项，所述自定义render函数供用户自己定义可编辑表的表头或内容；所述增强供用户在编辑器上编写执行的脚本，以实现增强配置功能；

所述api渲染模块在配置完成后，将配置的数据和表格动态展示列均通过api渲染到表格上。

第三方面，本发明提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的方法。

第四方面，本发明提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。

本发明实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：通过表格控件和属性配置区的配合，表格控件展示控件配置内容，再通过属性配置区进行数据来源、列配置、选择控件类型、快速配置和新增按钮的配置项，即可完成基础的配置，使配置变得简便，且属性配置区提供的所有属性配置项均有属性文字化描述，通俗易懂，无需到官网翻阅，即使用户无需编程基础，也能完成表格的配置；再通过功能强大的控件属性，具有扩展性强，灵活度高，可根据实际业务需求动态改变显示内容，避免后期重复性的开发工作，有效的契合了业务频繁变更的场景，使后端开发人员不再受前端代码的约束展示自己想要的表格，从而实现个性化的配置。不需要通过多次的更新部署或布包再上线，直接在线修改即可生效。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

下面参照附图结合实施例对本发明作进一步的说明。

图1为现有通过vxe-table表格的一配置界面示意图。

图2为本发明基于vue的表格的配置界面示意图。

图3为本发明实施例一中方法的流程图。

图4为本发明实施例中列配置的界面示意图。

图5为本发明实施例中表格配置的界面示意图。

图6为本发明实施例中数据来源的获取流程示意图。

图7为本发明实施例中自定义动态列的配置界面示意图。

图8为本发明实施例中自定义render函数的配置界面示意图。

图9为本发明实施例中增强的配置项的配置界面示意图。

图10为本发明实施例中复合表头的直接配置的配置界面示意图。

图11为本发明实施例中一树表的配置界面示意图。

图12为本发明实施例中复合表头的拼接组结合拼接字段的配置界面示意图。

图13为图12的配置后的拼接结果示意图。

图14为本发明实施例中的如嵌套表格的示意图。

图15为本发明实施例中下拉表格的配置界面示意图。

图16为本发明实施例中在编辑器实现增强功能时的配置界面示意图。

图17为本发明实施例中筛选配置的配置界面示意图。

图18为本发明实施例中联动配置的配置界面示意图。

图19为本发明实施例二中装置的结构示意图。

图20为本发明实施例三中电子设备的结构示意图。

图21为本发明实施例四中介质的结构示意图。

具体实施方式

本申请实施例通过提供一种基于vue的基础上引入vxe-table表格做配置，使得整个表格配置工作变得更加的简单、高效。

本申请实施例中的技术方案，总体思路如下：通过表格控件和属性配置区的配合，表格控件展示控件配置内容，再通过属性配置区进行数据来源、列配置、选择控件类型、快速配置和新增按钮的配置项，即可完成基础的配置，使配置变得简便，且属性配置区提供的所有属性配置项均有属性文字化描述，通俗易懂，无需到官网翻阅，即使用户无需编程基础，也能完成表格的配置；再通过功能强大的控件属性，具有扩展性强，灵活度高，可根据实际业务需求动态改变显示内容，避免后期重复性的开发工作，有效的契合了业务频繁变更的场景，使后端开发人员不再受前端代码的约束展示自己想要的表格，从而实现个性化的配置。不需要通过多次的更新部署或布包再上线，直接在线修改即可生效。

实施例一

如图2所示，本实施例提供一种基于vue的表格配置方法，在配置界面上提供表格控件和属性配置区，当表格控件被选择时响应一控件配置内容展示框，如图2的中间部分所示；所述表格控件为拖拽控件，选择方式为拖拽；所述属性配置区提供的所有属性配置项均有属性文字化描述如图2的右侧部分所示；所述属性配置区提供模板属性和控件属性；

如图3所示，所述属性配置区供用户选择数据来源，包括从本地数据集、远端数据和自定义动态列数据三种；其中，模板属性供用户选择本地数据集(数据集针对当前模板)，控件属性配置远端数据(针对当前控件)，增强配置自定义动态列数据(可编写增强的地方即可)；且当从本地数据集和远端数据获取到的列不足以满足用户需求的时候考虑使用自定义动态列数据；

(1)若用户选择本地数据集，则先通过所述模板属性提供包括列配置、选择控件类型、快速配置和新增按钮的配置项；如图4所示，所述列配置用于选择可操作的字段；所述选择控件类型用于配置可编辑表单元格类型，及快速配置操作列新增或修改的内容，或者快速配置表格需要导出的列和需要做计算的列；所述新增按钮用于添加本地数据集中不存在的，但页面需要展示的列；然后通过所述控件属性提供包括表类型、表格配置和预览的配置项；所述表类型用于选择表格的类型，包括普通表、树表和可编辑表；如图5所示，所述表格配置用于选择表格需要展示的列；所述预览用于查看配置效果；

(2)若用户选择远端数据，则先通过所述模板属性提供远端数据开关、请求路径、方式和参数的配置项，所述远端数据开关打开时，允许对远端数据进一步配置远端数据的请求路径，方式和参数，在获取远端数据后，先通过所述模板属性提供包括所述列配置的配置项，再通过所述控件属性提供包括所述表格配置的配置项；如图6所示，所述远端数据的获取方式包括直接请求url地址或者通过在代码块编写sql脚本获取；

(3)若用户选择自定义动态列数据，如图7所示，通过所述控件属性提供增强配置项，供设置动态列表格列数组，数组中的一条数据代表表格上的一个列，列内容包含必填的列字段和标签名称以及非必填的对齐方式宽度设置，然后调用动态列展示api渲染表格列；当前面的方法获取到的列不足以满足用户需求的时候考虑使用第三种动态列形式，在增强中根据实际业务需要做处理，将处理好的数据通过设置动态列的api渲染到表格上。

所述控件属性还提供自定义render函数和增强的配置项，如图8所示，所述自定义render函数供用户自己定义可编辑表的表头或内容；目前可编辑表的列提供了4种配置形式(select\input\date\number)，其余表格默认为不可编辑状态下的input类型，考虑到用户需要的控件可能超出提供范围，所以新增表头/内容自定义函数render，在vue中我们使用模板HTML语法组建页面，使用render函数我们可以用js语言来构建DOM达到想要的效果。

如图9所示，所述增强供用户在编辑器上编写执行的脚本，以实现包括查询、行拖拽、全选/反选、行单击、行双击、列失焦或聚焦、enter、图标点击的增强配置功能；同时，编辑器的一侧边还提供编写提示，大大方便了用户的编写工作。

在配置完成后，将配置的数据和表格动态展示列均通过api渲染到表格上，但render函数配置保存后可实时生效不调用api；除配置的数据、表格动态展示列外，其余效果可以不调用api。

如前所述，表类型种类多，分类细致，可分为三大类，即普通表(见图10)、树表(见图11)和可编辑表三种，其中所述普通表内包含多级复合表头和表嵌表两种形式；所述可编辑表包含普通可编辑表、可编辑树表、下拉表三种形式，且支持全键盘操作；

所述复合表头，根据父级下的子级是否都相同提供两种配置形式，第一种直接配置，如图10所示，分别指定父级和子级；如图12和图13所示，第二种拼接组结合拼接字段，所述拼接组存放的数据表示所有复合表头父级的标签名，所述拼接字段表示父级下的相同子级列数组，以拼接的方式渲染界面自动配置；

所述嵌套表，如图14所示，默认情况下嵌套表格，为了提高嵌套内容的灵活度，提供自定义html配置，提供自定义html配置，自定义DOM内容；

所述下拉表，如图15所示，一种配置在单元格上的下拉表格，供选中下拉表行数据快速将内容填充到当前行，通过映射配置，指定下拉表的列数据快速填充到主表的列字段上；若没有配置，则根据相同列字段填充，能配置唯一字段和唯一值，下拉表将不再展示主表中已存在的数据；当数据只能是从下拉表获取时，提供防止乱填开关供打开，使当输入值在数据中不存在时将清空或者保留原先的值；

如图16所示，所述增强在编辑器上提供前端前(请求执行前)、后端脚本(服务端脚本)和前端后(请求执行后)三种编写场景；若没有走接口的需求，将只执行所述前端前；所述后端脚本在脚本执行过程中或每个阶段的增强都能通过return返回值终止脚本继续执行；所述前端后根据api可获取接口返回的数据。前端后根据api可获取接口返回的数据，再根据实际业务需求对数据做处理，最后通过api设值将数据渲染到表格上，功能包括：查询、行拖拽、全选/反选、行单击、行双击(可编辑表：列失焦、聚焦、enter、图标点击等)等。

如图17所示，由于用户自定义表格显示内容，由于每个用户对字段的关注度不一样，所以提供筛选配置按照用户存储配置；逻辑控制表格的某些功能，例如：勾选禁用、行划线、合并单元格、列逻辑处理等。因此所述控件属性还提供筛选配置项，供用户对表格显示内容进行配置，以逻辑控制表格的功能，包括勾选禁用、行划线(划线颜色自定义)、合并单元格和列逻辑处理，编辑器里的逻辑处理以字符串形式存储在指定的变量中，再用eval()执行这个字符串表达式实现效果，提供编写提示，用户操作简单便捷。

如图18所示，所述控件属性还提供联动配置项，当表的行数据作为查询条件时表示当前表作为主表，另一表在这里叫副表，供用户在主表上打开关联表开关按钮，配置查询值，在副表上通过触发控件将主表绑定到副表上，并配置副表上哪个字段作为查询字段；在用户配置完后，实时监听主表的传递值，一旦主表的传递值内容发生变化，就根据所述查询值触发联动查询，将该变化更新渲染至副表上。另外，若要查询过滤条件，则需将表单控件与表格关联，表格上配置触发控件，将表单控件(表单控件就是单行文本、下拉框、复选框之类的控件)绑定到表格上，选择控件与表格关联的列字段，当控件值发生改变时，表格联动触发查询，将查询结果更新并渲染到表格上。比如过滤条件为时间过滤，只查询六月到十一月的数据，这时查询结果即为六月到十一月的数据。

基于同一发明构思，本申请还提供了与实施例一中的方法对应的装置，详见实施例二。

实施例二

如图19所示，在本实施例中提供了一种基于vue的表格配置装置，包括表格控件、属性配置区和api渲染模块：

所述表格控件，位于配置界面上，在被选择时响应一控件配置内容展示框；

所述属性配置区，在配置界面上提供属性配置项，包括模板属性和控件属性，且所有均有属性文字化描述；

所述属性配置区供用户选择数据来源，包括从本地数据集、远端数据和自定义动态列数据三种；其中，当从本地数据集和远端数据获取到的列不足以满足用户需求的时候考虑使用自定义动态列数据；

如图3所示，所述属性配置区供用户选择数据来源，包括从本地数据集、远端数据和自定义动态列数据三种；其中，当从本地数据集和远端数据获取到的列不足以满足用户需求的时候考虑使用自定义动态列数据；

(1)若用户选择本地数据集，则先通过所述模板属性提供包括列配置、选择控件类型、快速配置和新增按钮的配置项；如图4所示，所述列配置用于选择可操作的字段；所述选择控件类型用于配置可编辑表单元格类型，及快速配置操作列新增或修改的内容，或者快速配置表格需要导出的列和需要做计算的列；所述新增按钮用于添加本地数据集中不存在的，但页面需要展示的列；然后通过所述控件属性提供包括表类型、表格配置和预览的配置项；所述表类型用于选择表格的类型，包括普通表、树表和可编辑表；如图5所示，所述表格配置用于选择表格需要展示的列；所述预览用于查看配置效果；

(2)若用户选择远端数据，则先通过所述模板属性提供远端数据开关、请求路径、方式和参数的配置项，所述远端数据开关打开时，允许对远端数据进一步配置远端数据的请求路径，方式和参数，在获取远端数据后，先通过所述模板属性提供包括所述列配置的配置项，再通过所述控件属性提供包括所述表格配置的配置项；如图6所示，所述远端数据的获取方式包括直接请求url地址或者通过在代码块编写sql脚本获取；

(3)若用户选择自定义动态列数据，如图7所示，通过所述控件属性提供增强配置项，供设置动态列表格列数组，数组中的一条数据代表表格上的一个列，列内容包含必填的列字段和标签名称以及非必填的对齐方式宽度设置，然后调用动态列展示api渲染表格列；

所述控件属性还提供自定义render函数和增强的配置项，如图8所示，所述自定义render函数供用户自己定义可编辑表的表头或内容；如图9所示，所述增强供用户在编辑器上编写执行的脚本，以实现包括查询、行拖拽、全选/反选、行单击、行双击、列失焦或聚焦、enter、图标点击等的增强配置功能；同时，编辑器的一侧边还提供编写提示，大大方便了用户的编写工作。

所述api渲染模块在配置完成后，将配置的数据和表格动态展示列均通过api渲染到表格上。

如前所述，表类型包括普通表(见图10)、树表(见图11)和可编辑表三种，其中所述普通表内包含多级复合表头和表嵌表两种形式；所述可编辑表包含普通可编辑表、可编辑树表、下拉表三种形式，且支持全键盘操作；

所述复合表头，根据父级下的子级是否都相同提供两种配置形式，第一种直接配置，如图10所示，分别指定父级和子级；如图12和图13所示，第二种拼接组结合拼接字段，所述拼接组存放的数据表示所有复合表头父级的标签名，所述拼接字段表示父级下的相同子级列数组，以拼接的方式渲染界面自动配置；

所述嵌套表，如图14所示，提供自定义html配置，自定义DOM内容；

所述下拉表，如图15所示，一种配置在单元格上的下拉表格，供选中下拉表行数据快速将内容填充到当前行，通过映射配置，指定下拉表的列数据快速填充到主表的列字段上；若没有配置，则根据相同列字段填充，能配置唯一字段和唯一值，下拉表将不再展示主表中已存在的数据；当数据只能是从下拉表获取时，提供防止乱填开关供打开，使当输入值在数据中不存在时将清空或者保留原先的值；

如图16所示，所述增强在编辑器上提供前端前、后端脚本和前端后三种编写场景；若没有走接口的需求，将只执行所述前端前；所述后端脚本在脚本执行过程中或每个阶段的增强都能通过return返回值终止脚本继续执行；所述前端后根据api可获取接口返回的数据。

如图17所示，所述控件属性还提供筛选配置项，供用户对表格显示内容进行配置，以逻辑控制表格的功能，包括勾选禁用、行划线、合并单元格和列逻辑处理，编辑器里的逻辑处理以字符串形式存储在指定的变量中，再用eval()执行这个字符串表达式实现效果，提供编写提示。

如图18所示，所述控件属性还提供联动配置项，供用户在主表上打开关联表开关按钮，配置查询值，在副表上通过触发控件将主表绑定到副表上，并配置副表上哪个字段作为查询字段；在用户配置完后，实时监听主表的传递值，一旦主表的传递值内容发生变化，就根据所述查询值触发联动查询，将该变化更新渲染至副表上。另外，若要查询过滤条件，则需将表单控件与表格关联，表格上配置触发控件，将表单控件(表单控件就是单行文本、下拉框、复选框之类的控件)绑定到表格上，选择控件与表格关联的列字段，当控件值发生改变时，表格联动触发查询，将查询结果更新并渲染到表格上。比如过滤条件为时间过滤，只查询六月到十一月的数据，这时查询结果即为六月到十一月的数据。

由于本发明实施例二所介绍的装置，为实施本发明实施例一的方法所采用的装置，故而基于本发明实施例一所介绍的方法，本领域所属人员能够了解该装置的具体结构及变形，故而在此不再赘述。凡是本发明实施例一的方法所采用的装置都属于本发明所欲保护的范围。

基于同一发明构思，本申请提供了实施例一对应的电子设备实施例，详见实施例三。

实施例三

本实施例提供了一种电子设备，如图20所示，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时，可以实现实施例一中任一实施方式。

由于本实施例所介绍的电子设备为实施本申请实施例一中方法所采用的设备，故而基于本申请实施例一中所介绍的方法，本领域所属技术人员能够了解本实施例的电子设备的具体实施方式以及其各种变化形式，所以在此对于该电子设备如何实现本申请实施例中的方法不再详细介绍。只要本领域所属技术人员实施本申请实施例中的方法所采用的设备，都属于本申请所欲保护的范围。

基于同一发明构思，本申请提供了实施例一对应的存储介质，详见实施例四。

实施例四

本实施例提供一种计算机可读存储介质，如图21所示，其上存储有计算机程序，该计算机程序被处理器执行时，可以实现实施例一中任一实施方式。

本申请实施例中提供的技术方案，至少具有如下技术效果或优点：本申请实施例提供的方法、装置、系统、设备及介质，通过表格控件和属性配置区的配合，表格控件展示控件配置内容，再通过属性配置区进行数据来源、列配置、选择控件类型、快速配置和新增按钮的配置项，即可完成基础的配置，使配置变得简便，且属性配置区提供的所有属性配置项均有属性文字化描述，通俗易懂，无需到官网翻阅，即使用户无需编程基础，也能完成表格的配置；再通过功能强大的控件属性，具有扩展性强，灵活度高，可根据实际业务需求动态改变显示内容，避免后期重复性的开发工作，有效的契合了业务频繁变更的场景，使后端开发人员不再受前端代码的约束展示自己想要的表格，从而实现个性化的配置。不需要通过多次的更新部署或布包再上线，直接在线修改即可生效。

本领域内的技术人员应明白，本发明的实施例可提供为方法、装置或系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。

Claims (10)

1.一种基于vue的表格配置方法，其特征在于：

在配置界面上提供表格控件和属性配置区，当表格控件被选择时响应一控件配置内容展示框；所述属性配置区提供的所有属性配置项均有属性文字化描述；所述属性配置区提供模板属性和控件属性；

所述属性配置区供用户选择数据来源，包括从本地数据集、远端数据和自定义动态列数据三种；其中，当从本地数据集和远端数据获取到的列不足以满足用户需求的时候考虑使用自定义动态列数据；

(1)若用户选择本地数据集，则先通过所述模板属性提供包括列配置、选择控件类型、快速配置和新增按钮的配置项；所述列配置用于选择可操作的字段；所述选择控件类型用于配置可编辑表单元格类型，及快速配置操作列新增或修改的内容，或者快速配置表格需要导出的列和需要做计算的列；所述新增按钮用于添加本地数据集中不存在的，但页面需要展示的列；然后通过所述控件属性提供包括表类型、表格配置和预览的配置项；所述表类型用于选择表格的类型，包括普通表、树表和可编辑表；所述表格配置用于选择表格需要展示的列；所述预览用于查看配置效果；

(2)若用户选择远端数据，则先通过所述模板属性提供远端数据开关、请求路径、方式和参数的配置项，所述远端数据开关打开时，允许对远端数据进一步配置远端数据的请求路径，方式和参数，在获取远端数据后，先通过所述模板属性提供包括所述列配置的配置项，再通过所述控件属性提供包括所述表格配置的配置项；

(3)若用户选择自定义动态列数据，通过所述控件属性提供增强配置项，供设置动态列表格列数组，数组中的一条数据代表表格上的一个列，列内容包含必填的列字段和标签名称以及非必填的对齐方式宽度设置；

所述控件属性还提供自定义render函数和增强的配置项，所述自定义render函数供用户自己定义可编辑表的表头或内容；所述增强供用户在编辑器上编写执行的脚本，以实现增强配置功能；

在配置完成后，将配置的数据和表格动态展示列均通过api渲染到表格上。

2.根据权利要求1所述的一种基于vue的表格配置方法，其特征在于：

所述表格控件为拖拽控件，选择方式为拖拽；

所述远端数据的获取方式包括直接请求url地址或者通过在代码块编写sql脚本获取；

所述普通表内包含多级复合表头和表嵌表两种形式；所述可编辑表包含普通可编辑表、可编辑树表、下拉表三种形式，且支持全键盘操作；

所述复合表头，根据父级下的子级是否都相同提供两种配置形式，第一种直接配置，分别指定父级和子级；第二种拼接组结合拼接字段，所述拼接组存放的数据表示所有复合表头父级的标签名，所述拼接字段表示父级下的相同子级列数组，以拼接的方式渲染界面自动配置；

所述嵌套表，提供自定义html配置，自定义DOM内容；

所述下拉表，一种配置在单元格上的下拉表格，供选中下拉表行数据快速将内容填充到当前行，通过映射配置，指定下拉表的列数据快速填充到主表的列字段上；若没有配置，则根据相同列字段填充，能配置唯一字段和唯一值，下拉表将不再展示主表中已存在的数据；当数据只能是从下拉表获取时，提供防止乱填开关供打开，使当输入值在数据中不存在时将清空或者保留原先的值；

所述增强在编辑器上提供前端前、后端脚本和前端后三种编写场景；若没有走接口的需求，将只执行所述前端前；所述后端脚本在脚本执行过程中或每个阶段的增强都能通过return返回值终止脚本继续执行；所述前端后根据api可获取接口返回的数据。

3.根据权利要求1所述的一种基于vue的表格配置方法，其特征在于：

所述控件属性还提供筛选配置项，供用户对表格显示内容进行配置，以逻辑控制表格的功能，包括勾选禁用、行划线、合并单元格和列逻辑处理，编辑器里的逻辑处理以字符串形式存储在指定的变量中，再用eval()执行这个字符串表达式实现效果，提供编写提示。

4.根据权利要求1所述的一种基于vue的表格配置方法，其特征在于：还包括：

所述控件属性还提供联动配置项，供用户在主表上打开关联表开关按钮，配置查询值，在副表上通过触发控件将主表绑定到副表上，并配置副表上哪个字段作为查询字段；在用户配置完后，实时监听主表的传递值，一旦主表的传递值内容发生变化，就根据所述查询值触发联动查询，将该变化更新渲染至副表上。

5.一种基于vue的表格配置装置，其特征在于：包括表格控件、属性配置区和api渲染模块：

所述表格控件，位于配置界面上，在被选择时响应一控件配置内容展示框；

所述属性配置区，在配置界面上提供属性配置项，包括模板属性和控件属性，且所有均有属性文字化描述；

所述属性配置区供用户选择数据来源，包括从本地数据集、远端数据和自定义动态列数据三种；其中，当从本地数据集和远端数据获取到的列不足以满足用户需求的时候考虑使用自定义动态列数据；

(1)若用户选择本地数据集，则先通过所述模板属性提供包括列配置、选择控件类型、快速配置和新增按钮的配置项；所述列配置用于选择可操作的字段；所述选择控件类型用于配置可编辑表单元格类型，及快速配置操作列新增或修改的内容，或者快速配置表格需要导出的列和需要做计算的列；所述新增按钮用于添加本地数据集中不存在的，但页面需要展示的列；然后通过所述控件属性提供包括表类型、表格配置和预览的配置项；所述表类型用于选择表格的类型，包括普通表、树表和可编辑表；所述表格配置用于选择表格需要展示的列；所述预览用于查看配置效果；

(2)若用户选择远端数据，则先通过所述模板属性提供远端数据开关、请求路径、方式和参数的配置项，所述远端数据开关打开时，允许对远端数据进一步配置远端数据的请求路径，方式和参数，在获取远端数据后，先通过所述模板属性提供包括所述列配置的配置项，再通过所述控件属性提供包括所述表格配置的配置项；

(3)若用户选择自定义动态列数据，通过所述控件属性提供增强配置项，供设置动态列表格列数组，数组中的一条数据代表表格上的一个列，列内容包含必填的列字段和标签名称以及非必填的对齐方式宽度设置；

所述控件属性还提供自定义render函数和增强的配置项，所述自定义render函数供用户自己定义可编辑表的表头或内容；所述增强供用户在编辑器上编写执行的脚本，以实现增强配置功能；

所述api渲染模块在配置完成后，将配置的数据或表格动态展示列效果均通过api渲染到表格上。

6.根据权利要求5所述的一种基于vue的表格配置装置，其特征在于：

所述表格控件为拖拽控件，选择方式为拖拽；

所述远端数据的获取方式包括直接请求url地址或者通过在代码块编写sql脚本获取；

所述普通表内包含多级复合表头和表嵌表两种形式；所述可编辑表包含普通可编辑表、可编辑树表、下拉表三种形式，且支持全键盘操作；

所述复合表头，根据父级下的子级是否都相同提供两种配置形式，第一种直接配置，分别指定父级和子级；第二种拼接组结合拼接字段，所述拼接组存放的数据表示所有复合表头父级的标签名，所述拼接字段表示父级下的相同子级列数组，以拼接的方式渲染界面自动配置；

所述嵌套表，提供自定义html配置，自定义DOM内容；

所述下拉表，一种配置在单元格上的下拉表格，供选中下拉表行数据快速将内容填充到当前行，通过映射配置，指定下拉表的列数据快速填充到主表的列字段上；若没有配置，则根据相同列字段填充，能配置唯一字段和唯一值，下拉表将不再展示主表中已存在的数据；当数据只能是从下拉表获取时，提供防止乱填开关供打开，使当输入值在数据中不存在时将清空或者保留原先的值；

所述增强在编辑器上提供前端前、后端脚本和前端后三种编写场景；若没有走接口的需求，将只执行所述前端前；所述后端脚本在脚本执行过程中或每个阶段的增强都能通过return返回值终止脚本继续执行；所述前端后根据api可获取接口返回的数据。

7.根据权利要求5所述的一种基于vue的表格配置装置，其特征在于：所述控件属性还提供筛选配置项，供用户对表格显示内容进行配置，以逻辑控制表格的功能，包括勾选禁用、行划线、合并单元格和列逻辑处理，编辑器里的逻辑处理以字符串形式存储在指定的变量中，再用eval()执行这个字符串表达式实现效果，提供编写提示。

8.根据权利要求5所述的一种基于vue的表格配置装置，其特征在于：还包括：

所述控件属性还提供联动配置项，供用户在主表上打开关联表开关按钮，配置查询值，在副表上通过触发控件将主表绑定到副表上，并配置副表上哪个字段作为查询字段；在用户配置完后，实时监听主表的传递值，一旦主表的传递值内容发生变化，就根据所述查询值触发联动查询，将该变化更新渲染至副表上。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至4任一项所述的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至4任一项所述的方法。

Images