🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
#### 我们需要先了解这个字段需要被哪些选项所显示,然后再去设置显隐条件。这样就能保证一个字段不会出现在多个显隐规则里。接下来,我们将以实际案例带大家了解显隐规则的设置技巧。 ## 一、表单设置 #### 下图是一张项目报名表,不同的项目需要采集的报名信息各不一样。 ![](https://img.kancloud.cn/d5/57/d55763e76bff23284c9c0b4d1b80003e_399x671.png) #### 需要实现的显隐效果如下: ![](https://img.kancloud.cn/b8/ce/b8cebc6b1df3b21798e83dd77fdb6f1a_1543x538.png) ## 二、显隐规则设置 #### 了解了显隐效果要求之后,我们来设置显隐规则。在设置之前,我们先找出每个字段显示时需要满足的条件(也就是项目)。 * 姓名:项目A、项目B、项目C * 性别:项目A、项目B、项目C * 年龄:项目A、项目B * 体重:项目A、项目C * 身高:项目B #### 根据上述条件,我们得出,一共需要设置5条显隐规则,但是由于姓名和性别的条件完全一致,我们可以将其进行整合。最终得出以下4条规则: * 姓名、性别:项目A、项目B、项目C * 年龄:项目A、项目B * 体重:项目A、项目C * 身高:项目B > 冒号前面为显示字段,冒号后面为显示条件,然后我们按照显隐规则的设置方式一一进行设置。 #### **规则1**:选择项目A、项目B、项目C中的任意一个选项即显示「姓名」、「性别」字段。 ![](https://img.kancloud.cn/05/1e/051e6e7d3fbc02dfd9803a767ade49c7_987x407.png) #### **规则2**:选择项目A、项目B中任意一个选项即显示「年龄」字段。 ![](https://img.kancloud.cn/c5/a0/c5a08cc15d00de7e4ef377f8920fd8a0_976x353.png) #### **规则3**:选择项目A、项目C中任意一个选项即显示「体重」字段。 ![](https://img.kancloud.cn/89/98/89982a86753d301c6e42a3c7aa6f8bc4_993x367.png) #### **规则4**:选择项目B时即显示「身高」字段。 ![](https://img.kancloud.cn/20/7f/207fd154bbe5c3bcbb910053d51fcf6d_983x355.png) ## 三、效果演示 所有的规则设置完毕。 ![](https://img.kancloud.cn/15/d4/15d411b5a6b2fb51d57cc6893654270f_1021x662.png) 最后,我们可以看到,选则项目A时,出现姓名、性别、年龄、体重这4个字段;选则项目B时,出现姓名、性别、年龄、身高这4个字段;选则项目C时,则出现姓名、性别、体重这3个字段。 ![](https://img.kancloud.cn/49/b6/49b6cd11c6820d2be3a024f80143dd95_516x945.webp)