微搭使用笔记(四) 通过循环展示组件+json配置生成表单及数据获取

背景及整体思路

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

本文我们通过for循环加上json文件配置的方式实现一个通用表单页面,如果更换了表单只需要替换掉json配置文件即可实现页面生成和数据收集。这里只是提供一种思路,希望能够帮助到各位。

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

[
    {
        type: 1, // 1 文本输入 2 文本域输入 3 单选 4 多选 5 地域选择 6 其他扩展组件,如电话、邮箱等自行扩展
        key: 'name', //提交时的字段
        options: [
            {
                label: '男',
                value: '1'
            }{
                label: '女',
                value: '2'
            }
        ]
	}
]

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

新建应用

​ 微搭控制台新建应用,选择自定义应用,如果已经有应用也可直接使用。

新建页面

  1. 拖入表单组件,表单组件里拖入一个循环展示组件,如下图:

加入表单组件
2. 循环展示组件中添加文本输入、文本域输入、单选、多选、地域选择组件
加入基础组件
右侧的布局方式是可以切换的,水平或者垂直,根据个人喜好自行调整。

页面配置及验证

  1. 新建变量,输入json字符串

    新增变量
    输入json配置字符串
    示例json字符串如下:

    [{
    		type: 1,
    		key: 'name',
    		title: '姓名',
    		options: []
    	},
    	{
    		type: 3,
    		key: 'sex',
    		title: '性别',
    		options: [{
    			label: '男',
    			value: '1'
    		}, {
    			label: '女',
    			value: '2'
    		}]
    	},
    	{
    		type: 5,
    		key: 'region',
    		title: '所属区域',
    		options: []
    	},
    	{
    		type: 4,
    		key: 'check',
    		title: '出现心理问题时,您会选择',
    		options: [{
    			label: '寻求父母老师的帮助',
    			value: '1'
    		}, {
    			label: '向朋友同学倾诉',
    			value: '2'
    		}, {
    			label: '寻求专业的心理医生帮助',
    			value: '3'
    		}, {
    			label: '向学校心理咨询室咨询',
    			value: '4'
    		}, {
    			label: '暴力发泄(如摔东西、打架等)',
    			value: '5'
    		}, {
    			label: '自我消化,不告诉任何人',
    			value: '6'
    		}, {
    			label: '其他',
    			value: '7'
    		}]
    	},
    	{
    		type: 2, // 1 文本输入 2 文本域输入 3 单选 4 多选 5 地域选择 6 其他扩展组件,如电话、邮箱等自行扩展
    		key: 'others', //提交时的字段
    		title: '您还有其他的什么诉求',
    		options: []
    	}
    ]
    
  2. 循环组件配置关联json

    页面上点击循环组件添加如下配置并点击保存:

循环组件配置
继续点击循环展示下的组件,做字段绑定和展示配置关联配置,如下图:

字段绑定
配置组件展示和隐藏的条件,如下图:

组件展示和隐藏的条件配置
PS: 这里的表达式等号右侧应该是数字,截图中有问题

单选、多选的配置也是类似的,单选最终绑定结果:
单选绑定1
单选绑定2
绑定后的效果
3. 表单展示验证

​ 页面上查看预览图,可以看到组件都可以正常显示且能正常操作。

预览图查看效果
至此就完成了页面展示部分的内容开发。

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

添加按钮收集数据

表单容器中添加按钮组件,配置如下:
添加按钮组件
按钮添加点击事件,选择组件内置方法,然后选择表单组件的提交方法,如下图:
按钮添加点击事件
接下来给表单容器绑定提交事件,如下图:
表单容器绑定事件
可以看到我们在表单容器的提交事件中绑定了自定义方法handleSubmit,该方法中只是做了简单的打印。

我们通过页面填入信息,然后点击提交,观察控制台输出:
最终效果查看
可以看到数据是可以正常输出到控制台的,有了这部分数据就可以提交到自己的远端接口或者weda的数据源里了。

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

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泽济天下

你的鼓励是我最大的动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值