自定义/动态隐藏

本文说明如何让组件在固定条件或动态条件下自动隐藏/显示，包括静态隐藏字段与依赖其它字段进行联动隐藏的典型用法。

静态隐藏

当某个字段只用于存储数据或联动计算、不需要在页面上展示时，可以通过 隐藏 属性将其永久隐藏。

典型场景：

• 系统级字段：例如用户类型 userType、机构编码 orgCode 等
• 只参与计算的中间字段：只被其它组件引用，不需要让用户直接编辑

示例：

• 创建字段：userType
• 设置初始值：从上下文 excontext.userInfo.userType 读取
• 其他组件的选项、显隐、默认值可以根据 formModel.userType 动态联动
• 提交表单时，userType 仍会包含在最终数据中，只是始终不在界面上展示

动态隐藏

更常见的是根据用户输入、上下文或其它字段的值，动态控制组件是否显示。此时使用 隐藏(函) 属性。

隐藏(函) 本质上是一个 JavaScript 函数，其返回值为：

• true：当前组件隐藏
• false：当前组件显示

函数通常可以读取：

• 表单模型 formModel：当前表单各字段值（用于联动判断）
• 上下文 excontext：页面/业务上下文（不同项目注入的内容可能不同）

以下为一个常见的联动示例。

1. 根据身份证类型动态切换输入框

• 首先，将「身份证号输入框」的 隐藏(函) 属性配置为：

  return formModel.id_type !== '1'

  表示：当证件类型不为居民身份证（值不等于 '1'）时，隐藏身份证号输入框。

• 然后，将「其他证件号输入框」的 隐藏(函) 属性配置为：

  return formModel.id_type === '1'

  表示：当证件类型为居民身份证（值等于 '1'）时，隐藏其他证件号输入框。

通过这种互斥条件的配置，可以在表单上实现“二选一”的输入体验：用户只会看到与当前证件类型匹配的输入框。

注意事项

• 隐藏(函) 应只负责返回隐藏条件，尽量避免在函数中修改 formModel 等外部状态，以减少联动的副作用。
• 若组件既设置了 隐藏 又设置了 隐藏(函)，只会优先生效 隐藏(函)。

如何验证是否生效？

1. 在设计器中配置好 隐藏 或 隐藏(函) 属性后，点击顶部切换到编辑模式, 然后自由测试。
2. 尝试修改参与联动的字段（例如证件类型 id_type），观察目标组件是否随之显示/隐藏。
3. 如需确认隐藏字段是否随表单提交，可在运行态打印提交的数据，检查对应字段是否仍然存在并携带正确的值。