企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
1. 新增表单组件默认为带有一个输入框的表单组件,通过 “组件设置” -> "增加表单选项" 来新增更多表单项,如图: ![](https://box.kancloud.cn/7418f4ffaeb391bef5087b5194412d3f_345x447.png) 2. 新增的表单项默认为输入框类型,通过 "基本设置" -> "名称" -> "类型切换" 来切换为不同类型的表单项,如图: ![](https://box.kancloud.cn/c466c2c8fe36b693d680160dfeaeb514_358x467.png) 3. "基本设置" -> "参数属性" -> "参数名称" 中设置该表单项的传参键名,如图: ![](https://box.kancloud.cn/8cd9624fe0e37afdca78f573eea1f77e_347x418.png) 4. 对于单选框、复选框、下拉框类型的表单选项,通过 "基本设置" -> "子选项" 来配置每个子选项的特性,如图示,其中"选项1" 对应该子选项展示的名称,而"属性值"则对应该子选项对应的传参数值,请确保每个子选项的属性值不一致,在复选框中选中多个子选项,传参时各子选项的值以逗号拼接成字符串。 ![](https://box.kancloud.cn/f0d605973a771a312ad1e9036124f289_344x715.png) 5. "基本设置" -> "删除当前",删除当前选中的表单项,如图示: ![](https://box.kancloud.cn/5587840ee9f83cb2f7c93f30e1db0b3c_344x391.png) 6. 对于后端接口来说,请确保接口返回数据格式如下(**用于提示表单提交成功或失败**): ``` { Code: 200, //成功状态码 data: {}, //返回数据 Message: '提示信息' //提示信息 } ``` 7. 由于是跨域提交,所以请确保接口支持[跨域](https://segmentfault.com/a/1190000011145364)。 注意: 由于表单组件需要调用到后端接口以及传参相关,纯运营同学在使用时通常会感觉吃力,所以在使用表单组件时需要找开发同学协助来配置。 --- *举例:* >表单请求地址:http://www.mpages.cn 请求方式:post 额外参数:name=1;age=18 (**额外参数请用英文分号分割**) 如图: ![](https://box.kancloud.cn/3d85af69ce29f9123206040be09b0d7b_342x528.png) **假设该表单包含一个输入框和一个多选框,并配置如下:** 输入框: 参数属性:height 多选框: 参数属性:weight 选项1:100 ; 属性值:一百 选项2:150 ; 属性值:一百五``` 选项2:150 ; 属性值:一百五 选项3:200 ; 属性值:二百 如果用户在输入框中输入180,多选框勾选选项1,选项2并点击确定按钮提交后台,接口参数则为: ``` data = { name: 1, age: 18, height: 180, weight: '一百,一百五' } ```