【经验分享】单选/下拉单选选项数据源为动态值的时候控制组件状态

简介: 单选/下拉单选的选项为动态值的时候,实现类似于关联选项的功能。

场景介绍

在合同审批表单里,有一个下拉单选组件,选项值为关联其他表单数据。

当值为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)
}

结语

这是我目前使用的方法,如果有更简便的形式欢迎大家沟通。

后期选项值 增加/减少 之后,相对应的 增加/减少 分组组件,以及函数里的代码。

目录
相关文章
|
4月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
94 0
|
小程序 前端开发 JavaScript
微信小程序分类菜单激活状态跟随列表滚动自动切换
微信小程序分类菜单激活状态跟随列表滚动自动切换
171 0
微信小程序分类菜单激活状态跟随列表滚动自动切换
【项目需求】:两个下拉框之间选项关联
一.利用Option Group Attributes中的disabled属性实现 二.利用下拉框的@change事件
100 0
|
API
Vue2.x-02根据条件动态设置下拉框、时间选择器、文本框是否可编辑
Vue2.x-02根据条件动态设置下拉框、时间选择器、文本框是否可编辑
234 0
Vue2.x-02根据条件动态设置下拉框、时间选择器、文本框是否可编辑
【分享】宜搭子表单点击新增自动展开最后一项,折叠前面所有项.
宜搭子表单点击新增自动展开最后一项,折叠前面所有项. by 页一
763 0
【分享】宜搭子表单点击新增自动展开最后一项,折叠前面所有项.
宜搭组件-多选框所选内容如何判断对错
考试场景: 用户通过多选框选择了答案,如何在页面中就判断出所填内容的对错。 难点: 多选框选择是有前后顺序的,无法单纯比对答案来判断所选内容对错。 例如多选框选项ABCD,答案BD,用户先选D再选B,单纯比对会被判断为错误。
315 2
宜搭组件-多选框所选内容如何判断对错
|
SQL BI
FineReport 下拉列表框作为动态参数的实现方式(不使用参数界面实现参数对数据过滤)
决策报表中,不使用参数界面实现参数对图表的绑定(如:下拉列表框值对条状图数据过滤) 实现方法:下拉列表框的`控件名`是参数名
403 0
FineReport 下拉列表框作为动态参数的实现方式(不使用参数界面实现参数对数据过滤)
|
前端开发
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
|
前端开发
前端工作总结108-修改新增按钮显示逻辑
前端工作总结108-修改新增按钮显示逻辑
108 0
前端工作总结108-修改新增按钮显示逻辑