本发明专利涉及软件开发，具体为一种基于vue添加动态表格控件实现的动态表单的方法。
背景技术：
：：1、首先，介绍下表格控件开发的是在公司已有的一套管理系统中的功能设计模块的基础上开发的，该模块主要用于快速配置表单，无需用户手写代码，表单项包含多种基础控件和定制控件，其中基础控件包括单行输入控件、多行输入控件、数字输入控件、开关控件、单选框组控件、多选框组控件、下拉选择控件、级联选择控件、日期选择控件、时间选择控件、文件上传控件、图片上传控件、颜色选择控件、评分控件、滑块控件、分隔线控件、文本控件、富文本控件、按钮控件、链接控件和提示控件；2、而用户在配置动态表单时，需要插入表格控件，但现有的表单项的基础控件内不存在可配置的表格控件，为方便用户使用，亟需开发一种可动态配置表格列的表格控件；3、发明专利内容4、本发明专利的目的在于提供一种基于vue添加动态表格控件实现的动态表单的方法，以解决上述
背景技术：
：中提出的问题。5、为了解决上述技术问题，本发明专利提供如下技术方案：一种基于vue添加动态表格控件实现的动态表单的方法，包括如下步骤：6、s1:添加表格控件的配置项；7、通过在功能设计的基础控件配置项中添加表格控件的配置项；8、所述表格控件的配置项包括：用于添加表格至表单区的表单控件区、表单区和配置控件属性的控件属性区；9、所述表单区用于对表单区展示控件进行布局调整；10、所述控件属性区用于展示控件对应的属性配置；11、所述表格控件区包括：表格控件的标识、表单标题、表格对应的html标签、tableitem渲染方法、控件字段、表单字段和表单数据；12、所述列表字段包括列名、列字段和列宽；13、s2：通过在基础控件配置项config.js文件中选中添加表格控件的配置项进行表单创建；14、s3:表单区判断表格控件；15、所述判断方法为通过提前在config.js中的配置项定义每个控件标识，当创建表单时，表单区判断控件标识，选择对应控件配置项的渲染方法；16、所述表单控件标识为tableview时，开始对表格控件配置项进行渲染；17、s4:渲染表格控件配置项；18、通过基础控件配置项内的layout属性选择表格控件配置项内的tableitem渲染方法，tableitem渲染方法对表格控件配置项进行渲染，并在表单区生成表单；19、s5：配置表单列名和数据，并渲染表单列名；20、配置表单列名和数据的方法为：给所述控件字段赋值，并同步至表单的data数据，在elementui的表单table标题中定义表单data数据接收控件字段的数据，使element-table标题绑定控件字段的数据；21、渲染列名方法为：通过vue中的for方法循环el-table-colum表单标题的列名，并通过prop属性设置或返回被选表单标题的列名的属性和值，使label表单列名形成动态标签；22、其中列名为右侧定义的列数组；23、s6:编写脚本数据；24、所述脚本数据通过set方法对数据进行编写；25、所述脚本数据包括申请人填写、优先级选择，部门名称、人员姓名、人员年龄、和所属专业；26、s7：渲染脚本至表单；27、包括如下子步骤：28、s71:通过在表单属性的onload事件中通过setformdata方法将脚本数据传递至表单；29、表单获取到数据后，通过tableitem方法进行渲染后展示至表单；30、s72:功能设计的基础控件通过添加脚本，改变表单控件的数据；31、改变数据的方式：通过在任一项基础控件的change脚本事件中去获取对应部门的人员的脚步数据，然后将脚步数据赋值给表单的控件字段。32、s8:保存并同步系统菜单，并对表单渲染；33、所述同步方式为：点击保存按钮将表单数据保存至后端数据库表，后端会根据配置自动生成一个新菜单返回给前端展示；34、所述表单渲染方式为：表单配置好进行保存，会把所有控件的配置属性都保存到后端，当生成新菜单后，点击菜单，这时前端会调用后端接口去获取表单配置的所有属性去进行渲染。35、本发明专利所达到的有益效果是：36、1.通过在功能设计的基础控件配置项中添加表格控件的配置项，使用户在使用时，通过在基础控件配置项config.js文件中选中添加表格控件的配置项创建表单，表单区判断表格控件标识，并通过tableitem方法对表格控件配置项进行渲染生成表单，编写脚本数据并通过在表单属性的onload事件中通过setformdata方法将脚本数据传递至表单，表单获取到数据后，通过tableitem方法进行渲染后展示至表单，同时保存表单数据并同步系统菜单对表单进行渲染，从而配置动态表单；37、2.通过提前在config.js中的配置项定义每个控件标识，当创建表单时，表单区判断控件标识，选择对应控件配置项的渲染方法，使任一控件均可以调用对应的渲染方法；38、3.layout属性可以根据需求找到对应控件的渲染方法；39、4.通过给所述控件字段赋值，并同步至表单的data数据，在elementui的表单table标题中定义表单data数据接收控件字段的数据，使element-table标题绑定控件字段的数据，使表单数据可以实时更新；40、5.通过vue中的for方法循环el-table-colum表单标题的列名，并通过prop属性设置或返回被选表单标题的列名的属性和值，使label表单列名形成动态标签，使表单列名和列数据就可以实时渲染出来展示；41、6.通过在任一项基础控件的change脚本事件中去获取对应部门的人员的脚步数据，然后将脚步数据赋值给表单的控件字段，使用户可以根据需求查看对应部门人员的数据，数据会随人员的改变而进行变化。技术实现思路技术特征：1.一种基于vue添加动态表格控件实现的动态表单的方法，其特征在于：包括如下步骤：2.根据权利要求1所述的一种基于vue添加动态表格控件实现的动态表单的方法，其特征在于：所述步骤s3中，所述判断方法为通过提前在config.js中的配置项定义每个控件标识，当创建表单时，表单区判断控件标识，选择对应控件配置项的渲染方法；3.根据权利要求2所述的一种基于vue添加动态表格控件实现的动态表单的方法，其特征在于：所述步骤s4中，通过基础控件配置项内的layout属性选择控件配置项的渲染方法。4.根据权利要求1所述的一种基于vue添加动态表格控件实现的动态表单的方法，其特征在于：所述步骤s5中；5.根据权利要求1所述的一种基于vue添加动态表格控件实现的动态表单的方法，其特征在于：所述步骤s5中；6.根据权利要求1所述的一种基于vue添加动态表格控件实现的动态表单的方法，其特征在于：步骤s7还包括子步骤：技术总结本发明专利公开了一种基于VUE添加动态表格控件实现的动态表单的方法，包括如下步骤：S1:添加表格控件的配置项；S2：创建表格；S3:表单区判断表格控件标识；S4:渲染表格控件配置项；S5：配置表格列名和数据，并渲染表格列名；S6:编写脚本数据；S7：渲染脚本至表单，并进行展示；S8:保存并同步系统菜单，并对表单渲染；S9:功能设计的基础控件通过添加脚本，改变表格控件的数据；通过在基础控件配置项中添加表格控件的配置项，用户选中表格控件的配置项创建表单，表单区判断并渲染表格控件配置项生成表单，编写脚本数据并传递至表单，并渲染脚本数据进行展示，同时保存表单数据并同步系统菜单对表单进行渲染，从而配置动态表单。技术研发人员：杨松贵,陈沙沙受保护的技术使用者：南京维拓科技股份有限公司技术研发日：技术公布日：2024/3/11