CN117971187A - 一种基于Vue使用配置化数据的表格开发方法和装置 - Google Patents

一种基于Vue使用配置化数据的表格开发方法和装置 Download PDF

Info

Publication number
CN117971187A
CN117971187A CN202410370737.6A CN202410370737A CN117971187A CN 117971187 A CN117971187 A CN 117971187A CN 202410370737 A CN202410370737 A CN 202410370737A CN 117971187 A CN117971187 A CN 117971187A
Authority
CN
China
Prior art keywords
vue
configuration information
component
data
configuration
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.)
Pending
Application number
CN202410370737.6A
Other languages
English (en)
Inventor
彭一鸣
孙振
王洁
李志鹏
董金扬
李若金
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shandong Inspur Digital Business Technology Co Ltd
Original Assignee
Shandong Inspur Digital Business Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Shandong Inspur Digital Business Technology Co Ltd filed Critical Shandong Inspur Digital Business Technology Co Ltd
Priority to CN202410370737.6A priority Critical patent/CN117971187A/zh
Publication of CN117971187A publication Critical patent/CN117971187A/zh
Pending legal-status Critical Current

Links

Classifications

    • 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/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/25—Integrating or interfacing systems involving database management systems
    • G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
    • 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/20—Software design
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Computing Systems (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开一种基于Vue使用配置化数据的表格开发方法和装置，涉及电子表格开发技术领域；包括：步骤1：配置化输入数据，获得表格所需的各项配置信息；步骤2：根据Vue组件代码和模板代码生成自定义表格组件，通过自定义表格组件根据模板语法实现对表格的动态渲染；步骤3：将自定义表格组件集成到Vue.js框架中，等待根据配置信息渲染生成表格；步骤4：通过Vue.js提供的事件机制和组件通信方式，根据交互操作更新对应的配置信息；步骤5：自动检测变化的配置信息，更新自定义表格组件和对应的模板，根据新配置信息生成表格，同步配置信息和表格显示；本发明方法简化开发流程以满足数据展示和交互的需求。

Description

一种基于Vue使用配置化数据的表格开发方法和装置
技术领域
本发明公开一种方法和装置，涉及电子表格开发技术领域，具体地说是一种基于Vue使用配置化数据的表格开发方法和装置。
背景技术
表格作为数据展示的核心组件在Web应用中扮演着重要角色。过去的表格开发模式依赖于静态HTML和CSS，限制了表格交互性和用户体验。虽然前端开发中实现表格是一种常见的模式，但开发者往往需要手工编写代码实现表格的功能配置，比较繁琐，并且代码较为臃肿，而且复用性较差。
发明内容
本发明针对现有技术的问题，提供一种基于Vue使用配置化数据的表格开发方法和装置，基于Vue的使用配置化数据实现的表格开发，提升表格组件的性能和灵活性，简化开发流程以满足用户对数据展示和交互的不断增长的需求。
本发明提出的具体方案是：
本发明提供一种基于Vue使用配置化数据的表格开发方法，包括：
步骤1：配置化输入数据，获得表格所需的各项配置信息；
步骤2：使用 Vue.js 中的动态组件，结合配置信息，动态生成相应的 Vue 组件代码和模板代码，根据Vue 组件代码和模板代码生成自定义表格组件，通过自定义表格组件根据模板语法实现对表格的动态渲染，以适应不同的配置要求，其中Vue 组件代码涉及样式和脚本，模板代码涉及表格的结构、表头、列定义以及数据绑定内容；
步骤3：将自定义表格组件集成到 Vue.js 框架中，等待根据配置信息渲染生成表格；
步骤4：通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，根据交互操作更新对应的配置信息；
步骤5：基于Vue.js提供的数据驱动视图更新机制，在配置信息发生变化时，自动检测变化的配置信息，更新自定义表格组件和对应的模板，根据新配置信息生成表格，同步配置信息和表格显示。
进一步，所述的一种基于Vue使用配置化数据的表格开发方法中步骤1中配置化输入数据，包括：整理输入数据，获得表格发开所需参数，所述参数包括数据字段名称、组件类型和默认值信息，所述参数涵盖表格项和查询条件，
根据参数获得表格所需的各项配置信息，所述配置信息包括：
列配置信息，列配置信息包括表头字段，数据格式以及列对齐方式，根据列配置信息设置属性；
数据源信息，通过数据源信息的数据源字段中包含的数据源接口获得结构化的列表数据，用于渲染表格；
顶部工具栏信息，通过顶部工具栏信息配置表格顶部的按钮信息，用于在表格顶部渲染组件；
查询条件信息，通过查询条件信息配置查询表格的查询条件；
以及事件处理信息。
进一步，所述的一种基于Vue使用配置化数据的表格开发方法中步骤2中包括：
根据配置信息获取配置中的属性值和事件处理信息，动态生成模板字符串，
根据配置信息，处理各种属性类型，并根据属性类型将属性绑定到将生成的自定义表格组件上，
根据配置信息，生成 Vue 组件的事件处理函数，将配置中的事件处理信息转换为对应的事件处理函数，并绑定到将生成的自定义表格组件上，
将生成的自定义表格组件上动态注册到 Vue 实例中，以便在页面中使用。
进一步，所述的一种基于Vue使用配置化数据的表格开发方法中步骤4中通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，包括：
通过自定义表格组件监听用户的交互事件，捕获用户的交互操作，所述交互操作包括点击操作和输入操作，
根据交互操作的交互事件，调用相应的 Vue 方法处理交互事件，更新配置信息中相应的属性。
进一步，所述的一种基于Vue使用配置化数据的表格开发方法中步骤5中，具体包括：
基于Vue.js提供的数据驱动视图更新机制，创建Vue 实例，通过Vue 实例管理配置信息和视图的关系，
在 Vue 实例中将配置信息的各项属性声明为 Vue 的响应式数据属性，当配置信息发生变化时，自动检测到变化并通知相关的视图进行更新。
本发明还提供一种基于Vue使用配置化数据的表格开发装置，包括配置数据模块、代码生成模块、集成管理模块、交互捕捉模块和同步更新模块，
配置数据模块配置化输入数据，获得表格所需的各项配置信息；
代码生成模块使用 Vue.js 中的动态组件，结合配置信息，动态生成相应的 Vue组件代码和模板代码，根据Vue 组件代码和模板代码生成自定义表格组件，通过自定义表格组件根据模板语法实现对表格的动态渲染，以适应不同的配置要求，其中Vue 组件代码涉及样式和脚本，模板代码涉及表格的结构、表头、列定义以及数据绑定内容；
集成管理模块将自定义表格组件集成到 Vue.js 框架中，等待根据配置信息渲染生成表格；
交互捕捉模块通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，根据交互操作更新对应的配置信息；
同步更新模块基于Vue.js提供的数据驱动视图更新机制，在配置信息发生变化时，自动检测变化的配置信息，更新自定义表格组件和对应的模板，根据新配置信息生成表格，同步配置信息和表格显示。
进一步，所述的一种基于Vue使用配置化数据的表格开发装置中配置数据模块配置化输入数据，包括：整理输入数据，获得表格发开所需参数，所述参数包括数据字段名称、组件类型和默认值信息，所述参数涵盖表格项和查询条件，
根据参数获得表格所需的各项配置信息，所述配置信息包括：
列配置信息，列配置信息包括表头字段，数据格式以及列对齐方式，根据列配置信息设置属性；
数据源信息，通过数据源信息的数据源字段中包含的数据源接口获得结构化的列表数据，用于渲染表格；
顶部工具栏信息，通过顶部工具栏信息配置表格顶部的按钮信息，用于在表格顶部渲染组件；
查询条件信息，通过查询条件信息配置查询表格的查询条件；
以及事件处理信息。
进一步，所述的一种基于Vue使用配置化数据的表格开发装置中代码生成模块根据配置信息获取配置中的属性值和事件处理信息，动态生成模板字符串，
根据配置信息，处理各种属性类型，并根据属性类型将属性绑定到将生成的自定义表格组件上，
根据配置信息，生成 Vue 组件的事件处理函数，将配置中的事件处理信息转换为对应的事件处理函数，并绑定到将生成的自定义表格组件上，
将生成的自定义表格组件上动态注册到 Vue 实例中，以便在页面中使用。
进一步，所述的一种基于Vue使用配置化数据的表格开发装置中交互捕捉模块通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，包括：
通过自定义表格组件监听用户的交互事件，捕获用户的交互操作，所述交互操作包括点击操作和输入操作，
根据交互操作的交互事件，调用相应的 Vue 方法处理交互事件，更新配置信息中相应的属性。
进一步，所述的一种基于Vue使用配置化数据的表格开发装置中同步更新模块基于Vue.js提供的数据驱动视图更新机制，创建Vue 实例，通过Vue 实例管理配置信息和视图的关系，
在 Vue 实例中将配置信息的各项属性声明为 Vue 的响应式数据属性，当配置信息发生变化时，自动检测到变化并通知相关的视图进行更新。
本发明的有益之处是：
本发明提供了一种基于Vue使用配置化数据的表格开发方法，能够有效解决现有技术中表格开发过程中存在的问题，实现了表格的动态渲染和实时更新；本发明方法将表格的开发流程从现有的手动编写代码简化为通过输入的配置信息来生成所需的代码，通过动态生成的代码，提高了开发效率，降低了开发成本，同时也降低了开发人员的技术要求。
附图说明
图1是本发明方法流程示意图。
具体实施方式
下面结合附图和具体实施例对本发明作进一步说明，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定。
本发明提供一种基于Vue使用配置化数据的表格开发方法，包括：
步骤1：配置化输入数据，获得表格所需的各项配置信息；
步骤2：使用 Vue.js 中的动态组件，结合配置信息，动态生成相应的 Vue 组件代码和模板代码，根据Vue 组件代码和模板代码生成自定义表格组件，通过自定义表格组件根据模板语法实现对表格的动态渲染，以适应不同的配置要求，其中Vue 组件代码涉及样式和脚本，模板代码涉及表格的结构、表头、列定义以及数据绑定内容；
步骤3：将自定义表格组件集成到 Vue.js 框架中，等待根据配置信息渲染生成表格；
步骤4：通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，根据交互操作更新对应的配置信息；
步骤5：基于Vue.js提供的数据驱动视图更新机制，在配置信息发生变化时，自动检测变化的配置信息，更新自定义表格组件和对应的模板，根据新配置信息生成表格，同步配置信息和表格显示。
具体应用中，在本发明方法的一些实施例中，详细过程可参考如下：
步骤1：配置化输入数据，获得表格所需的各项配置信息。
通过Vue前端接收输入的数据，配置化输入数据，可进一步包括：整理输入数据，获得表格发开所需参数，所述参数包括数据字段名称、组件类型和默认值信息，所述参数涵盖表格项和查询条件，
根据参数获得表格所需的各项配置信息，所述配置信息可包括columns列配置信息、数据源信息、顶部工具栏信息、查询条件信息以及事件处理信息。
其中columns列配置信息包括表头字段，数据格式以及列对齐方式，根据列配置信息设置属性，比如width 属性，具体为控制列宽，共有两种方式，一种是固定像素，可以配置数字，用于设置列宽像素，例如将列宽设置为150px，设置字段数据为”width”:150；另一种按照百分比指定列宽，设置字段数据为”width”:50%。代码示例如下：
"columns": [
{
"name": "text",
"label": "名称",
"type": "text",
"placeholder": "-",
"width": 100
},
{
"type": "operation",
"label": "操作",
"buttons": [
{
"label": "编辑",
"type": "button",
"level": "link"
}
},
{
"label": "删除",
"type": "button",
"level": "primary"
}
],
"fixed": "right",
"placeholder": "-",
"width": 150
}
]
dataurl数据源信息，通过数据源信息的数据源字段中包含的数据源接口获得结构化的列表数据，用于渲染表格。数据源数据应符合web前端开发的需求，例如包括统一的资源定位符（URL），标准的HTTP方法，如GET、POST、PUT、DELETE等，状态码的正确返回等。前端可以根据需求通过数据源接口获取特定页数的数据，并能够按照指定的字段进行升序或降序排序，通过 URL 参数来传递分页和排序的信息。数据源接口提供灵活的查询功能，允许前端根据不同的条件进行数据的过滤和搜索。可以使用查询参数来传递过滤条件，如查询字符串或请求体中的参数。
headerToolbar顶部工具栏信息，通过顶部工具栏信息配置表格顶部的按钮信息，用于在表格顶部渲染组件。配置信息中可包含按钮的状态，如是否可用、是否显示，以便于渲染后与数据模型中的状态进行绑定，实现按钮的动态展示和管理。每个按钮可以定义相应的点击事件处理函数，通过Vue.js的事件监听机制，在按钮被点击时执行相应的操作，如触发新增、编辑、删除等功能。代码示例如下：
"headerToolbar": [
{
"label": "新建",
"type": "button",
"actionType": "dialog",
"level": "link",
"dialog": {
"type": "dialog",
"title": "新建",
"body": [
{
"type": "form",
"title": "表单",
"body": [
{
"type": "grid",
"columns": [
{
"body": [
{
"type": "select",
"label": "类型：",
"name": "applyType",
"options": [
{
"label": "A",
"value": "A"
},
{
"label": "B",
"value": "B"
}
],
"id": "u:71487bf96a19",
"multiple": false,
"mode": "horizontal",
"onEvent": {
"change": {
"weight": 0,
"actions": [
{
"componentId": "u:b30748a15b5f",
"actionType": "visibility",
"args": {
"value": "${event.data.value=='A'}"
}
},
{
"componentId": "u:07726f14750b",
"actionType": "visibility",
"args": {
"value": "${event.data.value=='A'}"
}
}
]
}
}
}
],
},
]
}
],
}
]
filter查询条件信息，通过查询条件信息配置查询表格的查询条件。查询条件通常由各种表单元素组成，如输入框、下拉菜单、日期选择器等。在配置信息中可包含表单元素类型，字段名。代码示例如下：
"filter": [
{
"type": "container",
"body": [
{
"type": "input-text",
"label": "编号：",
"name": "plan_id",
"mode": "horizontal",
"size": "md"
}
],
"size": "xs"
},
{
"type": "container",
"body": [
{
"type": "input-date-range",
"name": "create_date",
"label": "申请日期：",
"size": "md",
"mode": "horizontal",
"embed": false,
"format": "YYYY-MM-DD",
"inputFormat": "YYYY-MM-DD",
"startPlaceholder": "请选择开始时间",
"endPlaceholder": "请选择结束时间",
"value": ""
}
],
"size": "xs",
"wrapperBody": false
}
]
"perPageAvailable": [
10
]
步骤2：使用 Vue.js 中的动态组件，结合配置信息，动态生成相应的 Vue 组件代码和模板代码，根据Vue 组件代码和模板代码生成自定义表格组件，通过自定义表格组件根据模板语法实现对表格的动态渲染，以适应不同的配置要求，其中Vue 组件代码涉及样式和脚本，模板代码涉及表格的结构、表头、列定义以及数据绑定内容。
其中步骤2中可进一步，包括：
根据配置信息获取配置中的属性值和事件处理信息，动态生成模板字符串，
根据配置信息，处理各种属性类型，属性类型如字符串、数字、布尔值等，并根据属性类型将属性绑定到将生成的自定义表格组件上，
根据配置信息，生成 Vue 组件的事件处理函数，将配置中的事件处理信息转换为对应的事件处理函数，并绑定到将生成的自定义表格组件上，
将生成的自定义表格组件上动态注册到 Vue 实例中，以便在页面中使用。
步骤3：将自定义表格组件集成到 Vue.js 框架中，等待根据配置信息渲染生成表格。
步骤4：通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，根据交互操作更新对应的配置信息。
其中步骤4中可进一步通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，包括：
通过自定义表格组件监听用户的交互事件，捕获用户的交互操作，所述交互操作包括点击操作和输入操作，
根据交互操作的交互事件，调用相应的 Vue 方法处理交互事件，更新配置信息中相应的属性。
用户的交互操作能够实时地影响表格的显示，实现了数据和视图之间的动态交互。
步骤5：基于Vue.js提供的数据驱动视图更新机制，在配置信息发生变化时，自动检测变化的配置信息，更新自定义表格组件和对应的模板，根据新配置信息生成表格，同步配置信息和表格显示。
可进一步，具体包括：
基于Vue.js提供的数据驱动视图更新机制，创建Vue 实例，通过Vue 实例管理配置信息和视图的关系。
在 Vue 实例中将配置信息的各项属性声明为 Vue 的响应式数据属性，当配置信息发生变化时，自动检测到变化并通知相关的视图进行更新。其中例如通过自定义表格组件的模板语法双花括号语法{{ }}或指令v-bind、v-model等绑定配置信息的属性，模板中的视图内容与数据属性保持同步，实现了数据的动态展示。此外Vue 可以通过比较虚拟DOM 的方式确定哪些部分的视图需要更新。虚拟 DOM 是一个轻量级的 JavaScript 对象，代表真实 DOM 的映射。通过对虚拟 DOM 进行比较，Vue 能够高效地确定出需要更新的部分，从而减少不必要的 DOM 操作。根据虚拟 DOM 的比较结果，Vue 将更新需要更新的真实DOM，提高更新效率和性能。
本发明还提供一种基于Vue使用配置化数据的表格开发装置，包括配置数据模块、代码生成模块、集成管理模块、交互捕捉模块和同步更新模块，
配置数据模块配置化输入数据，获得表格所需的各项配置信息；
代码生成模块使用 Vue.js 中的动态组件，结合配置信息，动态生成相应的 Vue组件代码和模板代码，根据Vue 组件代码和模板代码生成自定义表格组件，通过自定义表格组件根据模板语法实现对表格的动态渲染，以适应不同的配置要求，其中Vue 组件代码涉及样式和脚本，模板代码涉及表格的结构、表头、列定义以及数据绑定内容；
集成管理模块将自定义表格组件集成到 Vue.js 框架中，等待根据配置信息渲染生成表格；
交互捕捉模块通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，根据交互操作更新对应的配置信息；
同步更新模块基于Vue.js提供的数据驱动视图更新机制，在配置信息发生变化时，自动检测变化的配置信息，更新自定义表格组件和对应的模板，根据新配置信息生成表格，同步配置信息和表格显示。
上述装置内各模块间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。
同样地，本发明装置能够有效解决现有技术中表格开发过程中存在的问题，实现了表格的动态渲染和实时更新；本发明装置将表格的开发流程从现有的手动编写代码简化为通过输入的配置信息来生成所需的代码，通过动态生成的代码，提高了开发效率，降低了开发成本，同时也降低了开发人员的技术要求。
需要说明的是，上述各流程和各装置结构中不是所有的步骤和模块都是必须的，可以根据实际的需要忽略某些步骤或模块。各步骤的执行顺序不是固定的，可以根据需要进行调整。上述各实施例中描述的系统结构可以是物理结构，也可以是逻辑结构，即，有些模块可能由同一物理实体实现，或者，有些模块可能分由多个物理实体实现，或者，可以由多个独立设备中的某些部件共同实现。
以上所述实施例仅是为充分说明本发明而所举的较佳的实施例，本发明的保护范围不限于此。本技术领域的技术人员在本发明基础上所作的等同替代或变换，均在本发明的保护范围之内。本发明的保护范围以权利要求书为准。

Claims (10)

1.一种基于Vue使用配置化数据的表格开发方法，其特征是包括：
步骤1：配置化输入数据，获得表格所需的各项配置信息；
步骤2：使用 Vue.js 中的动态组件，结合配置信息，动态生成相应的 Vue 组件代码和模板代码，根据Vue 组件代码和模板代码生成自定义表格组件，通过自定义表格组件根据模板语法实现对表格的动态渲染，以适应不同的配置要求，其中Vue 组件代码涉及样式和脚本，模板代码涉及表格的结构、表头、列定义以及数据绑定内容；
步骤3：将自定义表格组件集成到 Vue.js 框架中，等待根据配置信息渲染生成表格；
步骤4：通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，根据交互操作更新对应的配置信息；
步骤5：基于Vue.js提供的数据驱动视图更新机制，在配置信息发生变化时，自动检测变化的配置信息，更新自定义表格组件和对应的模板，根据新配置信息生成表格，同步配置信息和表格显示。
2.根据权利要求1所述的一种基于Vue使用配置化数据的表格开发方法，其特征是步骤1中配置化输入数据，包括：整理输入数据，获得表格发开所需参数，所述参数包括数据字段名称、组件类型和默认值信息，所述参数涵盖表格项和查询条件，
根据参数获得表格所需的各项配置信息，所述配置信息包括：
列配置信息，列配置信息包括表头字段，数据格式以及列对齐方式，根据列配置信息设置属性；
数据源信息，通过数据源信息的数据源字段中包含的数据源接口获得结构化的列表数据，用于渲染表格；
顶部工具栏信息，通过顶部工具栏信息配置表格顶部的按钮信息，用于在表格顶部渲染组件；
查询条件信息，通过查询条件信息配置查询表格的查询条件；
以及事件处理信息。
3.根据权利要求1所述的一种基于Vue使用配置化数据的表格开发方法，其特征是步骤2中包括：
根据配置信息获取配置中的属性值和事件处理信息，动态生成模板字符串，
根据配置信息，处理各种属性类型，并根据属性类型将属性绑定到将生成的自定义表格组件上，
根据配置信息，生成 Vue 组件的事件处理函数，将配置中的事件处理信息转换为对应的事件处理函数，并绑定到将生成的自定义表格组件上，
将生成的自定义表格组件上动态注册到 Vue 实例中，以便在页面中使用。
4.根据权利要求1所述的一种基于Vue使用配置化数据的表格开发方法，其特征是步骤4中通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，包括：
通过自定义表格组件监听用户的交互事件，捕获用户的交互操作，所述交互操作包括点击操作和输入操作，
根据交互操作的交互事件，调用相应的 Vue 方法处理交互事件，更新配置信息中相应的属性。
5.根据权利要求3所述的一种基于Vue使用配置化数据的表格开发方法，其特征是步骤5中，具体包括：
基于Vue.js提供的数据驱动视图更新机制，创建Vue 实例，通过Vue 实例管理配置信息和视图的关系，
在 Vue 实例中将配置信息的各项属性声明为 Vue 的响应式数据属性，当配置信息发生变化时，自动检测到变化并通知相关的视图进行更新。
6.一种基于Vue使用配置化数据的表格开发装置，其特征是包括配置数据模块、代码生成模块、集成管理模块、交互捕捉模块和同步更新模块，
配置数据模块配置化输入数据，获得表格所需的各项配置信息；
代码生成模块使用 Vue.js 中的动态组件，结合配置信息，动态生成相应的 Vue 组件代码和模板代码，根据Vue 组件代码和模板代码生成自定义表格组件，通过自定义表格组件根据模板语法实现对表格的动态渲染，以适应不同的配置要求，其中Vue 组件代码涉及样式和脚本，模板代码涉及表格的结构、表头、列定义以及数据绑定内容；
集成管理模块将自定义表格组件集成到 Vue.js 框架中，等待根据配置信息渲染生成表格；
交互捕捉模块通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，根据交互操作更新对应的配置信息；
同步更新模块基于Vue.js提供的数据驱动视图更新机制，在配置信息发生变化时，自动检测变化的配置信息，更新自定义表格组件和对应的模板，根据新配置信息生成表格，同步配置信息和表格显示。
7.根据权利要求6所述的一种基于Vue使用配置化数据的表格开发装置，其特征是配置数据模块配置化输入数据，包括：整理输入数据，获得表格发开所需参数，所述参数包括数据字段名称、组件类型和默认值信息，所述参数涵盖表格项和查询条件，
根据参数获得表格所需的各项配置信息，所述配置信息包括：
列配置信息，列配置信息包括表头字段，数据格式以及列对齐方式，根据列配置信息设置属性；
数据源信息，通过数据源信息的数据源字段中包含的数据源接口获得结构化的列表数据，用于渲染表格；
顶部工具栏信息，通过顶部工具栏信息配置表格顶部的按钮信息，用于在表格顶部渲染组件；
查询条件信息，通过查询条件信息配置查询表格的查询条件；
以及事件处理信息。
8.根据权利要求6所述的一种基于Vue使用配置化数据的表格开发装置，其特征是代码生成模块根据配置信息获取配置中的属性值和事件处理信息，动态生成模板字符串，
根据配置信息，处理各种属性类型，并根据属性类型将属性绑定到将生成的自定义表格组件上，
根据配置信息，生成 Vue 组件的事件处理函数，将配置中的事件处理信息转换为对应的事件处理函数，并绑定到将生成的自定义表格组件上，
将生成的自定义表格组件上动态注册到 Vue 实例中，以便在页面中使用。
9.根据权利要求6所述的一种基于Vue使用配置化数据的表格开发装置，其特征是交互捕捉模块通过Vue.js 提供的事件机制和组件通信方式，通过自定义表格组件捕获用户的交互操作，包括：
通过自定义表格组件监听用户的交互事件，捕获用户的交互操作，所述交互操作包括点击操作和输入操作，
根据交互操作的交互事件，调用相应的 Vue 方法处理交互事件，更新配置信息中相应的属性。
10.根据权利要求8所述的一种基于Vue使用配置化数据的表格开发装置，其特征是同步更新模块基于Vue.js提供的数据驱动视图更新机制，创建Vue 实例，通过Vue 实例管理配置信息和视图的关系，
在 Vue 实例中将配置信息的各项属性声明为 Vue 的响应式数据属性，当配置信息发生变化时，自动检测到变化并通知相关的视图进行更新。
CN202410370737.6A 2024-03-29 2024-03-29 一种基于Vue使用配置化数据的表格开发方法和装置 Pending CN117971187A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202410370737.6A CN117971187A (zh) 2024-03-29 2024-03-29 一种基于Vue使用配置化数据的表格开发方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202410370737.6A CN117971187A (zh) 2024-03-29 2024-03-29 一种基于Vue使用配置化数据的表格开发方法和装置

Publications (1)

Publication Number Publication Date
CN117971187A true CN117971187A (zh) 2024-05-03

Family

ID=90865989

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202410370737.6A Pending CN117971187A (zh) 2024-03-29 2024-03-29 一种基于Vue使用配置化数据的表格开发方法和装置

Country Status (1)

Country Link
CN (1) CN117971187A (zh)

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH0916382A (ja) * 1995-06-30 1997-01-17 Oki Electric Ind Co Ltd プログラム開発支援システム
CA2713970A1 (en) * 2009-08-23 2011-02-23 Bank Of America Corporation Display rendering system with supporting components
CN112506493A (zh) * 2020-10-30 2021-03-16 福建亿能达信息技术股份有限公司 一种基于vue的表格配置方法、装置、设备和介质
CN114003307A (zh) * 2021-10-28 2022-02-01 平安普惠企业管理有限公司 基于umd模式的动态组件加载注册方法、装置、设备及介质
CN114218906A (zh) * 2021-12-22 2022-03-22 四川启睿克科技有限公司 基于Vue的表格数据格式化组件实现方法
CN115407988A (zh) * 2022-08-31 2022-11-29 中国银行股份有限公司 一种表单组件的处理方法、系统、存储介质及电子设备
CN115617327A (zh) * 2022-11-08 2023-01-17 浙江极氪智能科技有限公司 低代码页面搭建系统、方法及计算机可读存储介质
CN115686507A (zh) * 2022-08-25 2023-02-03 合肥友高物联网标识设备有限公司 一种基于vue的表格配置及渲染方法
CN117032675A (zh) * 2023-10-08 2023-11-10 深圳云图数智信息科技有限公司 一种动态表单设计方法
CN117331567A (zh) * 2023-10-17 2024-01-02 深圳市酷开网络科技股份有限公司 一种基于数据化的静态页面代码生成方法及相关设备
CN117473949A (zh) * 2023-10-11 2024-01-30 中国建设银行股份有限公司 表单动态布局方法及系统

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH0916382A (ja) * 1995-06-30 1997-01-17 Oki Electric Ind Co Ltd プログラム開発支援システム
CA2713970A1 (en) * 2009-08-23 2011-02-23 Bank Of America Corporation Display rendering system with supporting components
CN112506493A (zh) * 2020-10-30 2021-03-16 福建亿能达信息技术股份有限公司 一种基于vue的表格配置方法、装置、设备和介质
CN114003307A (zh) * 2021-10-28 2022-02-01 平安普惠企业管理有限公司 基于umd模式的动态组件加载注册方法、装置、设备及介质
CN114218906A (zh) * 2021-12-22 2022-03-22 四川启睿克科技有限公司 基于Vue的表格数据格式化组件实现方法
CN115686507A (zh) * 2022-08-25 2023-02-03 合肥友高物联网标识设备有限公司 一种基于vue的表格配置及渲染方法
CN115407988A (zh) * 2022-08-31 2022-11-29 中国银行股份有限公司 一种表单组件的处理方法、系统、存储介质及电子设备
CN115617327A (zh) * 2022-11-08 2023-01-17 浙江极氪智能科技有限公司 低代码页面搭建系统、方法及计算机可读存储介质
CN117032675A (zh) * 2023-10-08 2023-11-10 深圳云图数智信息科技有限公司 一种动态表单设计方法
CN117473949A (zh) * 2023-10-11 2024-01-30 中国建设银行股份有限公司 表单动态布局方法及系统
CN117331567A (zh) * 2023-10-17 2024-01-02 深圳市酷开网络科技股份有限公司 一种基于数据化的静态页面代码生成方法及相关设备

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
郭文学: "Web应用快速开发工具设计与实现", 《中国优秀硕士学位论文全文数据库 (信息科技辑)》, no. 2, 15 February 2023 (2023-02-15) *

Similar Documents

Publication Publication Date Title
CN111178027B (zh) 基于在线创建模板和在线指定数据的报告生成系统和方法
CN105354013B (zh) 应用界面渲染方法及装置
US8700988B2 (en) Selectively interpreted portal page layout template
US6268852B1 (en) System and method for facilitating generation and editing of event handlers
EP1008104B1 (en) Drag and drop based browsing interface
US5974430A (en) Method for dynamically embedding objects stored in a web server within HTML for display by a web browser
US6735586B2 (en) System and method for dynamic content retrieval
US7325188B1 (en) Method and system for dynamically capturing HTML elements
US20040090458A1 (en) Method and apparatus for previewing GUI design and providing screen-to-source association
CN110489116A (zh) 一种页面的渲染方法、装置及计算机存储介质
EP2375320A2 (en) An internet interface and integration language system and method
EP2938044B1 (en) System, method, apparatus, and server for displaying network medium information
CN112083920A (zh) 一种前端页面设计方法、装置、存储介质及设备
CN106844635A (zh) 网页中的元素的编辑方法及装置
CN101609399A (zh) 基于建模的智能化网站开发系统及方法
CN113159807A (zh) 落地页处理方法、装置、设备和介质
CN106033387B (zh) 测试flash内部控件的方法和装置
CN103853717A (zh) 网络爬虫
CN117348876B (zh) 基于freeRTOS嵌入式系统的应用开发方法、系统及介质
US20050050015A1 (en) Generic iViews
CN117762519A (zh) 组件管理方法、装置、计算机设备和存储介质
Boll et al. A comparison of multimedia document models concerning advanced requirements
CN117971187A (zh) 一种基于Vue使用配置化数据的表格开发方法和装置
CN110825352A (zh) 一种基于Vue.js和Django的权限控制方法及系统
JP2001125855A (ja) 動的Ｗｅｂページ生成プログラム

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