本文我们通过for循环加上json文件配置的方式实现一个通用表单页面#xff0c;如果更换了表单只需要替换掉json配置…背景及整体思路

上篇文章我们通过微搭提供的数据模型完成了问卷表单页面的创建和数据采集相对来说除了数据模型配置略显复杂外其他的倒还算方便。

本文我们通过for循环加上json文件配置的方式实现一个通用表单页面如果更换了表单只需要替换掉json配置文件即可实现页面生成和数据收集。

这里只是提供一种思路希望能够帮助到各位。

还是以问卷调查举例一般的问卷调查都会包含文本输入、文本域输入、单选、多选、地域选择等常见形式整体思路就是配置一个json文件这个json里会包含组件字段、组件类型、组件选项配置(包含key、value针对单选、多选)json大致格式如下:

[{type:

]页面上通过for循环遍历这个json然后根据类型type字段展示对应组件提交时根据key字段组装数据本文的目标就是根据这个配置文件生成表单页面同时能正确输出表单数据到控制台。

新建应用

循环展示组件中添加文本输入、文本域输入、单选、多选、地域选择组件

页面配置及验证

接下来就是收集数据目标是能按照我们设置的字段并赋值选中项或者输入值。

添加按钮收集数据

按钮添加点击事件选择组件内置方法然后选择表单组件的提交方法如下图:

接下来给表单容器绑定提交事件如下图

可以看到我们在表单容器的提交事件中绑定了自定义方法handleSubmit该方法中只是做了简单的打印。

可以看到数据是可以正常输出到控制台的有了这部分数据就可以提交到自己的远端接口或者weda的数据源里了。

到此本文的内容就结束了。

如前文所述本文只是针对表单生成提供了一种思路如果大家有更好的建议或者意见欢迎评论区指出~