表单填写界面往往希望通过用户的选择来判断是否显示某个字段，例如当下拉选项选择了“其他”时显示一个文本框给用户填写。简单的可以通过方式是判断步骤实现，但是这样会多出一个步骤名称，界面不太美观，下面介绍一种通过预处理的方式动态隐藏显示字段。
准备工作：
在白码低代码开发平台创建一个“填写表单”数据表用于存储填写数据，字段根据需要设置：
实现步骤：
1、创建功能，并添加“数据-新增-填写表单”步骤(填写)：
2、点击填写步骤的“设置”，将字段设为填写，并设置若干选项值：
3、获取“填写”步骤的步骤id及选项字段id：
4、点击”测试”按钮，打开表单填写界面：
5、按下“F12”，检查“其它”字段的class
6、添加“交互-预处理”步骤，并进入代码编辑器，编写以下代码：
function prepare($programStore, $form, vue) { let procedure = "608449deb3da9c7c7012e29f";//填写步骤id let field = "6084492a53cbff7c6429b2a1";//选项字段id let className = ".form-item-field-6084492fb3da9c7c7012e29e";//其它字段class //默认"其它"字段为隐藏状态 document.querySelector(className).hidden = true; //监控表单数据 vue.$watch(() => { return programStore.getters["getFormValue"](procedure) },//监控步骤数据 function (value, oldValue) { if (!_.isEqual(value, oldValue)) {//数据变化时处理 if (value[field] == "其它") {//选项字段的值为“其它”时 //显示"其它"字段 document.querySelector(className).hidden = false; } else {//选项字段的值不为“其它”时 //隐藏"其它"字段 document.querySelector(className).hidden = true; } } } ) }
7、将步骤连线，保存，并发布。
8、效果：
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69981626/viewspace-2769781/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
工单流转功能的简单实现
下一篇：
根据数据动态跳转功能
请登录后发表评论
登录
全部评论
