# 多选框
一组备选项中进行多选。
checkbox多选框中除了基础配置以外,主要的配置包含两大类:属性配置和数据配置。
![checkbox1](https://img.kancloud.cn/d5/ec/d5ece4ecec421c1d2857a3dcc6e06b7d_2329x1406.png "checkbox1.png")
## 1、 属性配置
属性配置中包含了组件当前显示的外观及功能。当前主要包含:
* 输入提示
* 是否隐藏
* 是否禁用
## 2、 数据配置
数据配置标示了当前下拉选择器所能展示的数据。当前支持静态数据、API接口、数据字典(需提前配置)三种输入格式的接入。
### 静态数据
静态数据配置直接在节目上填写即可。
![checkbox2](https://img.kancloud.cn/6a/b6/6ab65af55aeaf9b18f38b0f49d17c09b_2343x1351.png "checkbox2.png")
### API接口
API接口通过axios请求获取后端的接口数据后进行加载展示。
示例(仅模板):
```
{
"list": [
{
"type": "checkbox",
"options": {
"defaultValue": [
"1",
"2"
],
"placeholder": "请输入",
"dynamic": 1,
"options": [],
"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": "checkbox_1679568230348",
"key": "checkbox_1679568230348",
"rules": [
{
"required": false,
"message": "必填项",
"trigger": [
"blur"
]
}
]
}
],
"config": {
"labelPosition": "left",
"labelWidth": 100,
"size": "mini",
"outputHidden": true,
"hideRequiredMark": false,
"syncLabelRequired": false,
"customStyle": ""
}
}
```
![checkbox3](https://img.kancloud.cn/0f/98/0f98c087c8a9c70a2f34613b429a1575_2338x1385.png "checkbox3.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解析出来的数组单个值中用来显示的字段。
### 数据字典
数据字典需要提前配置。
![checkbox4](https://img.kancloud.cn/94/b9/94b9ca5205cea39cf8fb98c782ee72c6_2318x1236.png "checkbox4.png")