amis2/docs/zh-CN/components/form/checkboxes.md
hsm-lv 4acfbb99ce
feat:优化动作数据域 (#5544)
* feat:优化事件数据域

* feat:优化事件数据域

* feat:优化事件数据域(option->item,options->items)

* feat:优化事件数据域(version)

* feat:优化事件数据域(修复弹窗事件多次触发&并行数据获取问题)

* feat:优化事件数据域(删除多余代码)

* feat:优化事件数据域(更新文档)

* feat:优化事件数据域(更新文档)

* feat:优化动作数据域

* feat:优化动作数据域
2022-10-12 15:09:03 +08:00

16 KiB
Executable File
Raw Blame History

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 stringAPI 动态选项组
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 更新的值 更新数据,多个值用,分隔