amis2/docs/zh-CN/components/form/button-group-select.md

title	description	type	group	menuName	icon	order
Button-Group-Select 按钮点选		0	null	Button-Group-Select		6

基本用法

按钮集合当 select 点选用。

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "debug": true,
  "body": [
    {
      "type": "button-group-select",
      "label": "选项",
      "name": "type",
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        },
        {
          "label": "Option C",
          "value": "c"
        }
      ]
    }
  ]
}

垂直模式

配置"vertical": true，实现垂直模式

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "button-group-select",
      "label": "选项",
      "name": "type",
      "vertical": true,
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        },
        {
          "label": "Option C",
          "value": "c"
        }
      ]
    }
  ]
}

平铺模式

配置 "tiled": true 实现平铺模式

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "button-group-select",
      "label": "选项",
      "name": "type",
      "tiled": true,
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        },
        {
          "label": "Option C",
          "value": "c"
        }
      ]
    }
  ]
}

按钮主题样式

配置 btnLevel 统一设置按钮主题样式，注意 buttons 或 options 中的level属性优先级高于btnLevel。配置 btnActiveLevel 为按钮设置激活态时的主题样式。

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "debug": true,
  "body": [
    {
      "type": "button-group-select",
      "label": "选项",
      "name": "type",
      "btnLevel": "light",
      "btnActiveLevel": "warning",
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        },
        {
          "label": "Option C",
          "value": "c",
          "level": "primary"
        }
      ]
    }
  ]
}

属性表

当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

属性名	类型	默认值	说明
type	string	"button-group-select"	指定为 button-group-select 渲染器
vertical	boolean	false	是否使用垂直模式
tiled	boolean	false	是否使用平铺模式
btnLevel	'link' | 'primary' | 'secondary' | 'info'|'success' | 'warning' | 'danger' | 'light'| 'dark' | 'default'	"default"	按钮样式
btnActiveLevel	'link' | 'primary' | 'secondary' | 'info'|'success' | 'warning' | 'danger' | 'light'| 'dark' | 'default'	"default"	选中按钮样式
options	Array<object>或Array<string>		选项组
source	string或 API		动态选项组
multiple	boolean	false	多选
labelField	boolean	"label"	选项标签字段
valueField	boolean	"value"	选项值字段
joinValues	boolean	true	拼接值
extractValue	boolean	false	提取值
autoFill	object		自动填充

事件表

事件名称	事件参数	说明
change	value: string	值变化

动作表

动作名称	动作配置	说明
clear	-	清空
reset	-	将值重置为resetValue，若没有配置resetValue，则清空
reload	-	刷新（重新加载），只针对配置了source的点选按钮有效
setValue	value: string 更新的值	更新数据