单选
未升级到新版信息架构的组织,请 点此查看 使用手册
1. 适用场景
单选组件可用于在有限的相关选项中选择其中一个选项,比如选择性别、运动类型等场景。
注意:单选组件的选项值的长度最大不能超过 255 个字符
组件属性以及使用和示例请 点击此处 查看
2. 基础功能
2.1 排列方式
选项可以设置排列方式,目前支持水平排列、垂直排列,效果如图:
组件的排列方式
2.2 自定义选项-选项值/显示值
选项值和显示值可以不同,我们可以去自定义显示值和选项值,效果如图:
自定义选项值
2.2.1 显示值和选项值的区别
显示值:我们在表单页面所看到的内容就是显示值
选项值:数据联动的条件匹配所使用到的值就属于选项值,选项值和显示值默认是一样的,也可单独设置选项值
2.3 关联选项设置 - 字段显隐
选项关联适用场景:当想要实现选择某一选项后,展示该选项所对应的值时,可以使用选项关联,适用于合同管理、物品领用、采购等场景,效果如图:
关联选项设置及效果展示
2.4 支持反选
开启反选功能即可实现再次点击该选项就取消选择
以下视频展示了开启和关闭的效果对比:
反选功能
2.5 选项类型
单选组件支持以下 4 种选项类型:
- 自定义:根据自身需求自定义选项内容;
- 关联其他表单数据:通过关联设置,去获取到被关联的表单的一个数据作为当前表单的数据;
- 数据联动:当表单中某个字段的数据改变时,该表单中另一个字段的数据也会随之改变,一般用于设置组件的默认值;
- 网关数据:接口必须是外网支持调用,同时返回的接口格式为 [{"text":"111","value":"111"}]
选项类型
2.6 彩色
单选、复选、下拉单选、下拉复选组件均支持开启彩色按钮,开启后会根据选项不同则不同颜色展示,并且可以自定义颜色。
选项彩色
2.7 添加其他
若选项不确定时,可以开启添加其他功能,在遇到不符合的选项时就可以选择其他这一选项进行手动输入内容
3. 常见问题
3.1 单选组件里面,设置几个选项,如图,当选择【其他】的时候,可以输入填写内容,这个诉求要在一个组件里面实现(不想用关联选项,因为需要再设置其他组件),通过代码可以实现吗?或者其他组件能否实现这个场景?
答:可以通过代码实现, 绑定 onchange 事件,动态控制输入内容组件的组件状态。
export function onChange({ value }) {
if (value == "其他") {
this.$('numberField_krbd7ly0').setBehavior('NORMAL')//对应显示隐藏的组件唯一标识
} else {
this.$('numberField_krbd7ly0').setBehavior('HIDDEN')
}
}
----获取宜搭最新信息,欢迎关注我们----
本文档对您是否有帮助?