# 单选框
在一组备选项中进行单选。
radio单选框除了基础配置以外,主要的配置包含两大类:属性配置和数据配置。
![radio1](https://img.kancloud.cn/bb/73/bb73d3d488429eeec8d75adcddcb2a28_2358x1415.png "radio1.png")
## 1、 属性配置
属性配置中包含了组件当前显示的外观及功能。当前主要包含:
* 输入提示
* 是否隐藏
* 是否禁用
## 2、 数据配置
数据配置标示了当前下拉选择器所能展示的数据。当前支持静态数据、API接口、数据字典(需提前配置)三种输入格式的接入。
### 静态数据
静态数据配置直接在节目上填写即可。
![radio2](https://img.kancloud.cn/d5/d5/d5d574c4cd8647a3ac8cbfcc8930810b_2325x1408.png "radio2.png")
### API接口
API接口通过axios请求获取后端的接口数据后进行加载展示。
示例(仅模板):
```
{
"list": [
{
"type": "radio",
"options": {
"defaultValue": "",
"placeholder": "请输入",
"dynamic": 1,
"options": [
{
"value": "1",
"label": "选项1"
},
{
"value": "2",
"label": "选项2"
}
],
"remoteFunc": "https://netopt.net/api/bbs/api/hotUser",
"dataPath": "data",
"remoteValue": "userId",
"remoteLabel": "username",
"dictType": "",
"hidden": false,
"disabled": false,
"linkage": false,
"linkData": []
},
"label": "单选框",
"labelWidth": -1,
"width": "100%",
"span": 24,
"model": "radio_1679580924374",
"key": "radio_1679580924374",
"rules": [
{
"required": false,
"message": "必填项",
"trigger": [
"blur"
]
}
]
}
],
"config": {
"labelPosition": "left",
"labelWidth": 100,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"customStyle": ""
}
}
```
![radio3](https://img.kancloud.cn/f2/99/f2998a2405028864468cb3bc22d368f4_2313x1313.png "radio3.png")
*****
**配置说明**
**远端方法**:
远程请求的接口地址。 目前仅支持get请求。
**列表数据dataPath**
远程请求后数据很多时候并不直接就是数组,在返回的数据结构中在某个路径下才是我们需要的数据。
此处的解析依赖object-path。
举例1:
```
假设当前的数据返回结构为
{
"msg":"操作成功",
"code":0,
"data":[
{"id": 1 , "name": "张三"},
{"id": 2 , "name": "李四"}
]
}
则此时的dataPath 应该填写为: data
```
举例2:
```
{
"msg":"操作成功",
"code":0,
"data":{
list: [
{"id": 1 , "name": "张三"},
{"id": 2 , "name": "李四"}
],
pageIndex: 1,
pageSize: 2,
totalCount: 78
}
}
则此时的dataPath 应该填写为: data.list
```
**值字段**
通过dataPath解析出来的数组单个值中标记value的字段。
**标签字段**
通过dataPath解析出来的数组单个值中用来显示的字段。
### 数据字典
数据字典需要提前配置。
![radio4](https://img.kancloud.cn/ef/89/ef890e3528138b8a612599c736ec7064_2309x1124.png "radio4.png")