mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
4acfbb99ce
* feat:优化事件数据域 * feat:优化事件数据域 * feat:优化事件数据域(option->item,options->items) * feat:优化事件数据域(version) * feat:优化事件数据域(修复弹窗事件多次触发&并行数据获取问题) * feat:优化事件数据域(删除多余代码) * feat:优化事件数据域(更新文档) * feat:优化事件数据域(更新文档) * feat:优化动作数据域 * feat:优化动作数据域
16 KiB
Executable File
16 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Checkboxes 复选框 | 0 | null | Checkboxes | 9 |
用于实现多选。
基本用法
{
"type": "form",
"debug": true,
"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"
}
]
}
]
}
结果是数组模式
默认是拼接成字符串,如果希望结果是数组,可以设置 "joinValues": false
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"joinValues": false,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
如果只想提取 value,需要加上 "extractValue": true
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"joinValues": false,
"extractValue": true,
"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"
}
]
}
]
}
]
}
自定义选项渲染
2.0.0 及以上版本
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"menuTpl": "<span class='label label-${klass}'>${label}</span>",
"options": [
{
"label": "OptionA",
"value": "a",
"klass": "success"
},
{
"label": "OptionB",
"value": "b",
"klass": "danger"
},
{
"label": "OptionC",
"value": "c",
"klass": "warning"
},
{
"label": "OptionD",
"value": "d",
"klass": "info"
}
]
}
]
}
属性表
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 |
选项按几列显示,默认为一列 |
menuTpl | string |
支持自定义选项渲染 | |
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 | 配置删除选项接口 | |
optionType | default | button |
default |
按钮模式 |
itemClassName | string |
选项样式类名 | |
labelClassName | string |
选项标签样式类名 |
事件表
当前组件会对外派发以下事件,可以通过onEvent
来监听这些事件,并通过actions
来配置执行的动作,在actions
中可以通过${事件参数名}
来获取事件产生的数据(< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}
),详细请查看事件动作。
[name]
表示当前组件绑定的名称,即name
属性,如果没有配置name
属性,则通过value
取值。
事件名称 | 事件参数 | 说明 |
---|---|---|
change | [name]: string 选中值 |
选中值变化时触发 |
动作表
当前组件对外暴露以下特性动作,其他组件可以通过指定actionType: 动作名称
、componentId: 该组件id
来触发这些动作,动作配置可以通过args: {动作配置项名称: xxx}
来配置具体的参数,详细请查看事件动作。
动作名称 | 动作配置 | 说明 |
---|---|---|
clear | - | 清空 |
reset | - | 将值重置为resetValue ,若没有配置resetValue ,则清空 |
reload | - | 重新加载,调用 source ,刷新数据域数据刷新(重新加载) |
setValue | value: string 更新的值 |
更新数据,多个值用, 分隔 |