2020-09-02 15:30:16 +08:00
|
|
|
---
|
|
|
|
title: Radios 单选框
|
|
|
|
description:
|
|
|
|
type: 0
|
|
|
|
group: null
|
|
|
|
menuName: Radios 单选框
|
|
|
|
icon:
|
|
|
|
order: 36
|
|
|
|
---
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
用于实现单选。
|
|
|
|
|
2020-09-02 15:30:16 +08:00
|
|
|
## 基本用法
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
```schema: scope="body"
|
2020-09-02 15:30:16 +08:00
|
|
|
{
|
|
|
|
"type": "form",
|
|
|
|
"controls": [
|
|
|
|
{
|
|
|
|
"name": "radios",
|
|
|
|
"type": "radios",
|
|
|
|
"label": "radios",
|
|
|
|
"options": [
|
|
|
|
{
|
|
|
|
"label": "OptionA",
|
|
|
|
"value": "a"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "OptionB",
|
|
|
|
"value": "b"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "OptionC",
|
|
|
|
"value": "c"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "OptionD",
|
|
|
|
"value": "d"
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2021-04-08 23:19:23 +08:00
|
|
|
## 列显示
|
2021-04-03 00:17:51 +08:00
|
|
|
|
2021-04-08 23:19:23 +08:00
|
|
|
设置 `inline` 可以纵向显示,用于显示列很多的情况
|
2021-04-03 00:17:51 +08:00
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
{
|
|
|
|
"type": "form",
|
|
|
|
"controls": [
|
|
|
|
{
|
|
|
|
"name": "radios",
|
|
|
|
"type": "radios",
|
|
|
|
"label": "radios",
|
2021-04-08 23:19:23 +08:00
|
|
|
"inline": false,
|
|
|
|
"options": [
|
|
|
|
{
|
|
|
|
"label": "OptionA",
|
|
|
|
"value": "a"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "OptionB",
|
|
|
|
"value": "b"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "OptionC",
|
|
|
|
"value": "c"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "OptionD",
|
|
|
|
"value": "d"
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
## 控制列显示的分裂
|
|
|
|
|
|
|
|
通过 columnsCount 来设置列显示的列数,比如下面例子是两列。
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
{
|
|
|
|
"type": "form",
|
|
|
|
"controls": [
|
|
|
|
{
|
|
|
|
"name": "radios",
|
|
|
|
"type": "radios",
|
|
|
|
"label": "radios",
|
|
|
|
"inline": false,
|
|
|
|
"columnsCount": 2,
|
2021-04-03 00:17:51 +08:00
|
|
|
"options": [
|
|
|
|
{
|
|
|
|
"label": "OptionA",
|
|
|
|
"value": "a"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "OptionB",
|
|
|
|
"value": "b"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "OptionC",
|
|
|
|
"value": "c"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"label": "OptionD",
|
|
|
|
"value": "d"
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2020-09-02 15:30:16 +08:00
|
|
|
## 属性表
|
|
|
|
|
|
|
|
当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
|
|
|
|
|
2021-02-01 20:44:49 +08:00
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
|
|
|
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
|
|
|
| source | `string`或 [API](../../../docs/types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
|
|
|
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
|
|
|
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
|
|
|
| columnsCount | `number` | `1` | 选项按几列显示,默认为一列 |
|
2021-04-08 23:19:23 +08:00
|
|
|
| inline | `boolean` | `true` | 是否显示为一行 |
|
2021-02-01 20:44:49 +08:00
|
|
|
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|