mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-15 17:31:18 +08:00
12 KiB
Executable File
12 KiB
Executable File
| title | description | type | group | menuName | icon | order |
|---|---|---|---|---|---|---|
| Checkboxes 复选框 | 0 | null | Checkboxes | 9 |
用于实现多选。
基本用法
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
显示全选
通过 checkAll 属性配置全选
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"checkAll": true,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
按钮模式
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"optionType": "button",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
按列显示
设置 "inline": false
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"inline": false,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
展示多行
可以配置columnsCount属性调整展示列的个数
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes1",
"type": "checkboxes",
"label": "默认的复选框",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
},
{
"type": "divider"
},
{
"name": "checkboxes2",
"type": "checkboxes",
"label": "显示两列的复选框",
"columnsCount": 2,
"inline": false,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
1.8.0 及以上版本
columnsCount 还有一种数组形式，可以手动控制每行显示的列数
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes1",
"type": "checkboxes",
"label": "默认的复选框",
"columnsCount": [1, 2, 3],
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
},
{
"label": "OptionE",
"value": "e"
},
{
"label": "OptionF",
"value": "f"
}
]
}
]
}
分组显示
"inline": false 下，选项中配置 children 字段可以实现分组展示效果。
{
"type": "form",
"mode": "horizontal",
"debug": true,
"body": [
{
"type": "checkboxes",
"name": "checkboxes",
"label": "城市选择",
"inline": false,
"checkAll": true,
"options": [
{
"label": "A类型",
"children": [
{
"label": "选项 A-1",
"value": "a-1"
},
{
"label": "选项 A-2",
"value": "a-2"
}
]
},
{
"label": "B类型",
"children": [
{
"label": "选项 B-1",
"value": "b-1"
},
{
"label": "选项 B-2",
"value": "b-2"
},
{
"label": "选项 B-3",
"value": "b-3"
},
{
"label": "选项 B-4",
"value": "b-4"
}
]
}
]
}
]
}
属性表
当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| options | Array<object>或Array<string> |
选项组 | |
| source | string或 API |
动态选项组 | |
| delimiter | string |
, |
拼接符 |
| labelField | string |
"label" |
选项标签字段 |
| valueField | string |
"value" |
选项值字段 |
| joinValues | boolean |
true |
拼接值 |
| extractValue | boolean |
false |
提取值 |
| columnsCount | number |
1 |
选项按几列显示，默认为一列 |
| checkAll | boolean |
false |
是否支持全选 |
| inline | boolean |
true |
是否显示为一行 |
| defaultCheckAll | boolean |
false |
默认是否全选 |
| creatable | boolean |
false |
新增选项 |
| createBtnLabel | string |
"新增选项" |
新增选项 |
| addControls | Array<表单项> | 自定义新增表单项 | |
| addApi | API | 配置新增选项接口 | |
| editable | boolean |
false |
编辑选项 |
| editControls | Array<表单项> | 自定义编辑表单项 | |
| editApi | API | 配置编辑选项接口 | |
| removable | boolean |
false |
删除选项 |
| deleteApi | API | 配置删除选项接口 |
事件表
当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。
| 事件名称 | 事件参数 | 说明 |
|---|---|---|
| change | event.data.value: string 选中值 |
选中值变化时触发 |
动作表
当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。
| 动作名称 | 动作配置 | 说明 |
|---|---|---|
| clear | - | 清空 |
| reset | - | 将值重置为resetValue，若没有配置resetValue，则清空 |
| reload | - | 重新加载，调用 source，刷新数据域数据刷新（重新加载） |
| setValue | value: string 更新的值 |
更新数据，多个值用,分隔 |