实现表单字段的条件显示
Roy
• 发表于:2021-07-31 21:13:20 • 更新于:2021-07-31 21:13:20
485

概述:

表单填写界面往往希望通过用户的选择来判断是否显示某个字段,例如当下拉选项选择了“其他”时显示一个文本框给用户填写。简单的可以通过方式是判断步骤实现,但是这样会多出一个步骤名称,界面不太美观,下面介绍一种通过预处理的方式动态隐藏显示字段。

 

准备工作:

创建一个“填写表单”数据表用于存储填写数据,字段根据需要设置:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210520/1621495503447_%E5%9B%BE%E7%89%871.png 

 

实现步骤:

1、创建功能,并添加“数据-新增-填写表单”步骤(填写):

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210520/1621495508788_%E5%9B%BE%E7%89%872.png 

 

2、点击填写步骤的“设置”,将字段设为填写,并设置若干选项值:

 http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210520/1621495513258_%E5%9B%BE%E7%89%873.png

 

3、获取“填写”步骤的步骤id及选项字段id:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210520/1621495518285_%E5%9B%BE%E7%89%874.png 

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210520/1621495527410_%E5%9B%BE%E7%89%875.png 

 

4、点击”测试”按钮,打开表单填写界面:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210520/1621495542421_%E5%9B%BE%E7%89%876.png

 

5、按下“F12”,检查“其它”字段的class

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210520/1621495546865_%E5%9B%BE%E7%89%877.png 

 

6、添加“交互-预处理”步骤,并进入代码编辑器,编写以下代码:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210520/1621495551752_%E5%9B%BE%E7%89%878.png 

 

代码如下:         复制代码

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、将步骤连线,保存,并发布。

实现效果:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210520/1621495651981_Roy-%E8%A1%A8%E5%8D%95%E5%AD%97%E6%AE%B5%E7%9A%84%E6%9D%A1%E4%BB%B6%E6%98%BE%E7%A4%BA%E5%AE%9E%E7%8E%B0-%E9%85%8D%E5%9B%BE-%E5%AD%97%E6%AE%B5%E9%9A%90%E8%97%8F%E6%98%BE%E7%A4%BA.gif

 


本文是否对您有帮助?
有帮助
没帮助
您是否遇到了以下问题?
内容过期或不准确
缺少场景、事例
链接有误
太简单,步骤待完善
其他
提交反馈
如需获取即时帮助,请联系
小助理
微信扫码添加小助理
让你的想法快速变成软件吧~
联系我们
售前咨询电话
020-88520693
意见箱 · 建议反馈
您的宝贵建议,使白码更完美!
白码小助理
加入白码社区,学习更多开发小技巧!
微信扫码添加白码小助理