场景介绍
在合同审批表单里，有一个下拉单选组件，选项值为关联其他表单数据。
当值为A时，显示A1、A2、A3.....
当值为B时，显示B1、B2、B3.....
....
类似这种
实现思路
新建一个分组A，把A1、A2、A3.....放进去，依次类推，然后通过JS代码控制各个分组的状态，把控制状态部分的代码写成一个函数。在onchage和查看界面的didMount里执行。
详细过程
在JS面板里新建一个函数，这里我命名为changeBehavior
exportfunctionchangeBehavior(value) { this.$('分组A的ID').setBehavior(value==="A"?"NORMAL" : "HIDDEN") this.$('分组B的ID').setBehavior(value==="B"?"NORMAL" : "HIDDEN") this.$('分组C的ID').setBehavior(value==="C"?"NORMAL" : "HIDDEN") this.$('分组D的ID').setBehavior(value==="D"?"NORMAL" : "HIDDEN") }
如果场景比较复杂，可以用下面这个循环版本，类似于关联选项的界面，A、B、C为单选的值，后面列表里添加要显示的组件ID，用英文逗号分隔。
后期只需要维护 valuesMap 变量
exportfunctionchangeBehavior(value) { // 值 和对应的组件IDconstvaluesMap=newMap([ ['A', ['分组A1的ID','分组A2的ID']], ['B', ['分组B1的ID','分组B2的ID']], ['C', ['分组C1的ID','分组C2的ID']], ]) for (constiofvaluesMap.values()) { i.forEach((fieldId) => { this.$(fieldId).setBehavior('HIDDEN') }, this) } if (valuesMap.has(value)) { valuesMap.get(value).forEach((fieldId) => { this.$(fieldId).setBehavior('NORMAL') }, this) } }
然后在didMount函数里调用changeBehavior
exportfunctiondidMount() { this.changeBehavior(this.$('单选的ID').getValue()) }
在单选组件的onChange里也调用changeBehavior
exportfunctiononChange({ value, actionType, item }) { this.changeBehavior(value) }
结语
这是我目前使用的方法，如果有更简便的形式欢迎大家沟通。
后期选项值 增加/减少 之后，相对应的 增加/减少 分组组件，以及函数里的代码。
